/* ==========================================================================
   Design tokens for Sego Web Design
   --------------------------------------------------------------------------
   This is the one file to edit when re-theming this template for a client.
   Every color, font, and type size the site uses is declared here. The main
   stylesheet (styles.css) only ever refers to these variables.
   ========================================================================== */

:root {
  /* Surfaces */
  --bone:        #F3EDE1;   /* page background */
  --card:        #F8F4EA;   /* cards, form fields */
  --sand:        #EDE5D3;   /* alternating section background */
  --paper:       #FDFBF5;   /* featured pricing card */

  /* Text */
  --ink:         #2E2620;   /* headings */
  --body:        #4A4038;   /* body copy */
  --prose:       #3B322A;   /* long-form section copy */
  --muted:       #6B6053;   /* secondary text */
  --placeholder: #7A6E5B;   /* input placeholder text */

  /* Accents */
  --violet:      #5C4A7D;   /* primary accent, buttons, links */
  --violet-dark: #453564;   /* hover */
  --sage:        #59604A;   /* eyebrow text */
  --green:       #4E6151;
  --green-dark:  #3D4A3F;
  --gold:        #C9A24B;   /* the lily's center */
  --error:       #9C3D22;
  --error-bg:    #F5EAE2;
  --error-line:  #D0A08C;

  /* Lines */
  --rule:        #DDD3BE;   /* section dividers, light strokes */
  --border:      #8A7D66;   /* interactive borders: 3.67:1 on --card, meets WCAG 3:1 */
  --stroke:      #C4B89E;   /* decorative strokes inside illustrations only */
  --stroke-deep: #B9A97F;   /* decorative strokes, darker variant */

  /* Dark section (After it launches) */
  --ink-rule:    #4A4038;
  --ink-copy:    #D8CDBA;
  --ink-muted:   #B8AC97;

  /* Type */
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --h1:      clamp(42px, 7.4vw, 88px);
  --h2:      clamp(28px, 3.4vw, 40px);
  --h2-lg:   clamp(32px, 4vw, 48px);
  --num:     clamp(56px, 7vw, 88px);
  --price:   clamp(38px, 3.6vw, 48px);
  --lede:    clamp(17px, 2vw, 21px);

  /* Layout */
  --measure: 1160px;
  --gutter:  24px;
  --radius:  3px;

  /* Motion */
  --ease: ease-in-out;
}