/* ==========================================================================
   Dear Aggie design tokens
   The single source of truth for color, type, spacing, radii, shadows and motion.
   Every value used by main.css comes from here. docs/tokens.md mirrors this file.

   Naming: --{category}-{role}[-{variant}]
     Primitive tokens (--palette-*) hold raw brand values.
     Semantic tokens (everything else) say what a value is for.
     Components only ever use semantic tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (all SIL Open Font License 1.1, see assets/fonts/licenses)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Allura";
  src: url("../fonts/allura-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------
     Primitive palette (literal values, copied by script into the Stripe sheet)
     ------------------------------------------------------------------------ */
  --palette-deep-pothos: #34503A;
  --palette-canyon-shade: #22362A;
  --palette-night-fern: #1B2B21;
  --palette-salt-cream: #F7F2E8;
  --palette-paper: #FFFDF8;
  --palette-marine-layer: #E4E8E1;
  --palette-sage-mist: #DCE3D8;
  --palette-driftwood: #D8CAB4;
  --palette-sand-line: #B9A98F;
  --palette-sand-edge: #958569;
  --palette-clay: #A9573A;
  --palette-clay-deep: #8E3B22;
  --palette-ember: #F0A98C;
  --palette-gold: #C9A35E;
  --palette-gold-light: #E2C489;
  --palette-ink: #1E2620;
  --palette-ink-soft: #3F453D;
  --palette-stone: #5B5E55;
  --palette-lichen: #C8CFC5;
  --palette-parchment: #EFE2C6;
  --palette-parchment-flap: #E6D5B1;
  --palette-parchment-edge: #B49D74;
  --palette-parchment-stitch: #C9B48A;
  --palette-seal: #A9573A;
  --palette-seal-ring: #7E3B24;
  --palette-seal-star: #F3E3C3;
  --palette-success: #2F6B47;

  /* ------------------------------------------------------------------------
     Semantic color: light (default)
     ------------------------------------------------------------------------ */
  --color-page: var(--palette-deep-pothos);            /* page ground */
  --color-on-page: var(--palette-salt-cream);          /* headings on page ground */
  --color-on-page-muted: var(--palette-lichen);        /* small caps lines on page ground */
  --color-on-page-subtle: var(--palette-sage-mist);    /* body copy on page ground */
  --color-accent: var(--palette-gold);                 /* logo, rules, sparkles */
  --color-accent-strong: var(--palette-gold-light);    /* gold text on page ground */
  --color-art: var(--palette-driftwood);               /* fine-line leaves and palm */

  --color-surface: var(--palette-paper);               /* form card */
  --color-on-surface: var(--palette-ink);
  --color-on-surface-muted: var(--palette-ink-soft);
  --color-on-surface-subtle: var(--palette-stone);
  --color-field: #FFFFFF;
  --color-field-border: var(--palette-sand-edge);       /* 3.6:1 on white, passes the 3:1 control rule */
  --color-field-border-hover: var(--palette-stone);
  --color-field-border-focus: var(--palette-deep-pothos);
  --color-field-disabled: var(--palette-marine-layer);

  --color-action: var(--palette-deep-pothos);          /* primary button */
  --color-action-hover: var(--palette-canyon-shade);
  --color-action-active: var(--palette-night-fern);
  --color-on-action: var(--palette-salt-cream);
  --color-link: var(--palette-deep-pothos);
  --color-link-hover: var(--palette-canyon-shade);

  --color-focus-ring: var(--palette-gold-light);       /* on page ground */
  --color-focus-ring-surface: var(--palette-deep-pothos); /* on the form card */

  --color-danger: var(--palette-clay-deep);
  --color-danger-surface: #F8E7DF;
  --color-success: var(--palette-success);
  --color-success-surface: #E3EEE6;

  --color-envelope: var(--palette-parchment);
  --color-envelope-flap: var(--palette-parchment-flap);
  --color-envelope-edge: var(--palette-parchment-edge);
  --color-envelope-stitch: var(--palette-parchment-stitch);
  --color-envelope-ink: var(--palette-canyon-shade);
  --color-seal: var(--palette-seal);
  --color-seal-ring: var(--palette-seal-ring);
  --color-seal-star: var(--palette-seal-star);

  /* ------------------------------------------------------------------------
     Type
     ------------------------------------------------------------------------ */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Allura", "Snell Roundhand", cursive;

  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Type scale (phone values; larger steps grow with the viewport) */
  --text-eyebrow: 0.75rem;                              /* 12px, Jost caps, the smallest size allowed */
  --text-small: 1.0625rem;                              /* 17px, notes and helper text */
  --text-body: 1.25rem;                                 /* 20px, Cormorant body */
  --text-input: 1rem;                                   /* 16px, never smaller so phones do not zoom */
  --text-lede: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-heading: clamp(2.75rem, 1.8rem + 4vw, 4.5rem);
  --text-wordmark: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --text-script: clamp(2.5rem, 2rem + 2vw, 3.5rem);

  --leading-tight: 1;
  --leading-snug: 1.25;
  --leading-body: 1.45;

  --tracking-wordmark: 0.22em;
  --tracking-eyebrow: 0.3em;
  --tracking-caps: 0.2em;
  --tracking-label: 0.16em;

  /* ------------------------------------------------------------------------
     Spacing (4px base)
     ------------------------------------------------------------------------ */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24, page gutter */
  --space-7: 2rem;      /* 32 */
  --space-8: 2.5rem;    /* 40 */
  --space-9: 3rem;      /* 48 */
  --space-10: 4rem;     /* 64 */
  --space-11: 6rem;     /* 96 */
  --space-12: 7rem;     /* 112, section padding on desktop */

  --width-content: 45rem;          /* 720px, contact column */
  --width-copy: 35rem;             /* 560px, lede line length */
  --touch-target: 2.75rem;         /* 44px minimum */
  --control-height: 3rem;          /* 48px inputs */
  --button-height: 3.25rem;        /* 52px buttons */

  /* ------------------------------------------------------------------------
     Radii
     ------------------------------------------------------------------------ */
  --radius-sm: 4px;                /* inputs, envelope */
  --radius-md: 6px;                /* cards */
  --radius-pill: 999px;            /* buttons */

  /* ------------------------------------------------------------------------
     Borders
     ------------------------------------------------------------------------ */
  --border-hairline: 1px;
  --border-control: 1px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* ------------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------------ */
  --shadow-card: 0 20px 50px rgba(20, 32, 24, 0.3);
  --shadow-envelope: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
  --shadow-field-focus: 0 0 0 3px rgba(52, 80, 58, 0.2);

  /* ------------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------------ */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --motion-float: 4.2s;            /* envelope drift loop */
  --motion-flap: 1.4s;             /* envelope flap breathing */
  --motion-sparkle: 2.4s;          /* sparkle twinkle loop */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-float: ease-in-out;

  /* ------------------------------------------------------------------------
     Art placement
     ------------------------------------------------------------------------ */
  --art-frond-opacity: 0.4;

  color-scheme: light dark;
}

/* --------------------------------------------------------------------------
   Semantic color: dark
   The page ground is already deep green, so dark mode deepens it and turns
   the cream form card into a dark card. Primitive palette values do not change.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-page: var(--palette-canyon-shade);
    --color-on-page-muted: var(--palette-lichen);
    --color-art: var(--palette-driftwood);
    --art-frond-opacity: 0.34;

    --color-surface: var(--palette-night-fern);
    --color-on-surface: var(--palette-salt-cream);
    --color-on-surface-muted: var(--palette-sage-mist);
    --color-on-surface-subtle: var(--palette-lichen);
    --color-field: #14211A;
    --color-field-border: #6E7F70;
    --color-field-border-hover: var(--palette-lichen);
    --color-field-border-focus: var(--palette-gold-light);
    --color-field-disabled: #26372C;

    --color-action: var(--palette-gold-light);
    --color-action-hover: #EDD3A0;
    --color-action-active: var(--palette-gold);
    --color-on-action: var(--palette-night-fern);
    --color-link: var(--palette-gold-light);
    --color-link-hover: #EDD3A0;

    --color-focus-ring-surface: var(--palette-gold-light);

    --color-danger: var(--palette-ember);
    --color-danger-surface: #3A2620;
    --color-success: #9BCFAE;
    --color-success-surface: #203A2B;

    --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.45);
    --shadow-field-focus: 0 0 0 3px rgba(226, 196, 137, 0.25);
  }
}