/* Crystal Skin -- brio overrides.

   Custom warm palettes (brand-brown primary, gold accent, stone
   neutral), serif headings, semantic retargets, and the few project
   utilities brio does not ship. Loaded after brio.css so these win via
   the `overrides` layer (and unlayered rescopes win over composition).

   Palette step roles follow brio's tokens.css: 1 app bg, 2 subtle bg,
   3-5 UI bg (default/hover/active), 6-8 borders, 9 solid brand stop
   (highest chroma, mode-invariant), 10 hover solid, 11 low-contrast
   text, 12 high-contrast text. Steps walk light->dark in light mode
   and reverse in dark mode; step 9 is identical in both. */

/* The one self-hosted font (OFL, license alongside in assets/fonts/).
   Prata is the headline serif, chosen over Cormorant and Playfair
   Display. Single weight, no italic; nothing sets an italic on the
   heading font, it would synthesize. */
@font-face {
  font-family: 'Prata';
  src: url('../fonts/prata.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@layer overrides {
  :root {
    /* Primary -- brand brown/taupe (anchored to the 2026 brand guide).
       Exact guide hexes land at their natural steps: #f0eae5 = step 3,
       #c2bbad = step 7, #7c6355 = step 9 (brand stop, mode-invariant).
       The guide's hues wobble (63 -> 85 -> 51), so the ramp rotates hue
       between anchors rather than holding one hue; at C 0.01-0.04 the
       drift reads as warmth, not a color change. Dark side rebuilt from
       the retired rose ramp (same hue family). */
    --primary-1:  light-dark(oklch(99.0% 0.003 60),    oklch(18.5% 0.005 50));
    --primary-2:  light-dark(oklch(97.4% 0.006 61),    oklch(21.5% 0.008 50));
    --primary-3:  light-dark(oklch(94.0% 0.0094 62.6), oklch(25.5% 0.014 50)); /* #f0eae5 */
    --primary-4:  light-dark(oklch(90.5% 0.012 68),    oklch(29.0% 0.020 51));
    --primary-5:  light-dark(oklch(87.0% 0.015 73),    oklch(33.0% 0.026 52));
    --primary-6:  light-dark(oklch(83.5% 0.018 79),    oklch(38.0% 0.031 53));
    --primary-7:  light-dark(oklch(79.4% 0.0209 84.6), oklch(44.0% 0.036 53)); /* #c2bbad */
    --primary-8:  light-dark(oklch(71.0% 0.028 68),    oklch(49.0% 0.040 52));
    --primary-9:  light-dark(oklch(52.1% 0.0389 50.8), oklch(52.1% 0.0389 50.8)); /* #7c6355 */
    --primary-10: light-dark(oklch(48.0% 0.038 50),    oklch(57.0% 0.042 52));
    --primary-11: light-dark(oklch(43.5% 0.034 50),    oklch(78.0% 0.035 55));
    --primary-12: light-dark(oklch(28.0% 0.022 48),    oklch(92.0% 0.015 60));

    /* Accent -- warm muted gold (the original primary ramp, demoted to
       accent when the brand guide made brown the lead). The rose ramp
       it replaces is retired; its hue family lives on in the primary
       brown (hue ~51). */
    --accent-1:  light-dark(oklch(99.0% 0.004 84),  oklch(18.5% 0.006 60));
    --accent-2:  light-dark(oklch(97.6% 0.008 84),  oklch(21.5% 0.010 62));
    --accent-3:  light-dark(oklch(95.0% 0.014 83),  oklch(25.5% 0.018 66));
    --accent-4:  light-dark(oklch(92.6% 0.020 82),  oklch(29.0% 0.026 68));
    --accent-5:  light-dark(oklch(89.5% 0.028 80),  oklch(33.0% 0.032 70));
    --accent-6:  light-dark(oklch(85.5% 0.034 79),  oklch(38.0% 0.038 71));
    --accent-7:  light-dark(oklch(80.5% 0.040 78),  oklch(44.0% 0.044 72));
    --accent-8:  light-dark(oklch(74.0% 0.050 76),  oklch(52.0% 0.052 73));
    --accent-9:  light-dark(oklch(68.9% 0.0688 74), oklch(68.9% 0.0688 74));
    --accent-10: light-dark(oklch(64.5% 0.066 73),  oklch(72.5% 0.064 75));
    --accent-11: light-dark(oklch(52.0% 0.058 73),  oklch(78.0% 0.052 78));
    --accent-12: light-dark(oklch(30.0% 0.038 70),  oklch(92.0% 0.022 82));

    /* Neutral -- warm stone (dark steps lifted + slightly warmer so the
       dark surface reads as warm stone, not crushed near-black) */
    --neutral-1:  light-dark(oklch(98.8% 0.003 70), oklch(18.0% 0.006 58));
    --neutral-2:  light-dark(oklch(97.2% 0.004 70), oklch(21.0% 0.006 56));
    --neutral-3:  light-dark(oklch(95.0% 0.005 68), oklch(24.5% 0.007 55));
    --neutral-4:  light-dark(oklch(92.5% 0.006 66), oklch(28.0% 0.008 52));
    --neutral-5:  light-dark(oklch(89.5% 0.007 64), oklch(31.5% 0.009 50));
    --neutral-6:  light-dark(oklch(86.0% 0.008 62), oklch(35.5% 0.010 48));
    --neutral-7:  light-dark(oklch(80.5% 0.009 62), oklch(41.0% 0.010 46));
    --neutral-8:  light-dark(oklch(74.0% 0.010 62), oklch(49.0% 0.011 45));
    --neutral-9:  light-dark(oklch(54.0% 0.012 62), oklch(54.0% 0.012 62));
    --neutral-10: light-dark(oklch(50.5% 0.012 60), oklch(58.5% 0.011 60));
    --neutral-11: light-dark(oklch(43.0% 0.010 58), oklch(76.5% 0.009 60));
    --neutral-12: light-dark(oklch(22.0% 0.008 55), oklch(94.5% 0.005 70));

    /*!* @link https://utopia.fyi/type/calculator?c=360,18,1.333,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 *!*/

    /*--step--2: clamp(0.6331rem, 0.5649rem + 0.3034vw, 0.8rem);*/
    /*--step--1: clamp(0.844rem, 0.7801rem + 0.2837vw, 1rem);*/
    /*--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);*/
    /*--step-1: clamp(1.4996rem, 1.4739rem + 0.1143vw, 1.5625rem);*/
    /*--step-2: clamp(1.9531rem, 2.0178rem + -0.0834vw, 1.999rem);*/
    /*--step-3: clamp(2.4414rem, 2.756rem + -0.4059vw, 2.6647rem);*/
    /*--step-4: clamp(3.0518rem, 3.7566rem + -0.9095vw, 3.552rem);*/
    /*--step-5: clamp(3.8147rem, 5.1112rem + -1.6729vw, 4.7348rem);*/

    /* @link https://utopia.fyi/type/calculator?c=360,16,1.333,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

    :root {
      --step--2: clamp(0.5628rem, 0.4985rem + 0.2859vw, 0.72rem);
      --step--1: clamp(0.7502rem, 0.6889rem + 0.2724vw, 0.9rem);
      --step-0: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
      --step-1: clamp(1.333rem, 1.303rem + 0.1332vw, 1.4063rem);
      --step-2: clamp(1.7578rem, 1.7847rem + -0.0347vw, 1.7769rem);
      --step-3: clamp(2.1973rem, 2.4387rem + -0.3115vw, 2.3686rem);
      --step-4: clamp(2.7466rem, 3.3254rem + -0.7468vw, 3.1573rem);
      --step-5: clamp(3.4332rem, 4.526rem + -1.41vw, 4.2087rem);
    }

    /* Three type roles; the sans stacks are from modernfontstacks.com,
       so Prata is the only webfont the site ships. */

    /* Body -- Geometric Humanist: the brand guide's Futura PT role in
       system form. Overrides brio's default base stack. */
    --font-base: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

    /* Headings -- Prata, replacing the guide's "The Seasons" (paid,
       Canva-distributed). Revisit purchasing The Seasons later, or
       keep Prata as the equivalent with the more open license. */
    --font-heading: 'Prata', Georgia, 'Times New Roman', serif;

    /* Subheads/eyebrows/quotes -- Classical Humanist: a flared sans
       that echoes Prata's stroke contrast. Replaced the guide's
       Josefin Sans, which paired badly -- the Canva faces fought the
       headline serif on real pages. */
    --font-subheading: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;

    /* Brand fill = step 9, the exact guide brown. Mode-invariant, so
       on-color is a fixed near-white warm tint (not light-dark()) --
       white passes AA on the L~52% brown, no lightened-fill hack
       needed. Links/visited held at step 11 so body links stay
       readable. */
    --color-primary: var(--primary-9);
    --color-on-primary: oklch(98.5% 0.004 60);
    --color-accent: var(--accent-9);
    /* White fails contrast on the L~69% gold, so accent keeps the
       fixed dark warm label the gold had as primary. */
    --color-on-accent: oklch(28% 0.03 70);
    --color-link: var(--primary-11);
    --color-link-visited: var(--primary-11);

    /* Re-declared --cs-* tokens (the WA theme files that defined them
       are being removed). Gradients and prose measure read these.
       Slot-named (accent/primary) so they survive palette recasts. */
    --cs-color-accent-pale: var(--accent-3);
    --cs-color-primary-pale: var(--primary-3);
    --cs-measure: 65ch;
  }

  /* Solid accent button: lighter champagne fill than the gold brand
     stop (step 9 read too dark as a button when gold was primary; the
     fix follows the ramp). Fixed value so it stays legible with the
     dark label in both modes. */
  .button:is(.is-accent):not(.is-outlined):not(.is-ghost):not(.is-bare) {
    --button-bg: oklch(80% 0.055 78);
  }

  /* Prata ships only 400; any other weight would synthesize. Negative
     tracking: display serifs at large sizes want letters closer than
     their body-tuned defaults. h1-h3 sit one step above brio's
     defaults -- sized during the Cormorant trial, kept after a look
     with Prata; drop back a step here if they start to shout. */
  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-normal);
    letter-spacing: -0.01em;
    /*overflow-wrap: break-word;*/
    /*word-break: break-all;*/
  }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }
  h5 { font-size: var(--step-0); }


  /* -- Breadcrumb -- */
  .breadcrumb {
    --breadcrumb-gap: var(--space-xs);
    --breadcrumb-font-size: var(--step--1);
    padding-block: var(--space-md);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  /* Composition rescopes + project utilities brio does not ship. */
  .center { --center-max: 75rem; }
  .center.is-narrow { --center-max: 52rem; }
  .region { padding-block: var(--region-space, var(--space-3xl)); }
  .uppercase { text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-subheading); }
  /* Centered grid: like brio .grid but tracks have a fixed max (no 1fr stretch)
     and the track group is centered, so one or two items sit centered with
     equal side spacing instead of pinned left. auto-fit collapses empty tracks;
     it wraps and stays centered as items grow. Tune via the custom props. */
  .cs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cs-grid-min, 16rem)), var(--cs-grid-max, 20rem)));
    gap: var(--cs-grid-gap, var(--space-lg));
    justify-content: var(--cs-grid-justify, center);
  }
  .font-base { font-family: var(--font-base) }
  .bg-subtle { background-color: var(--color-surface-sunken); }
  .bg-accent-pale { background-color: var(--cs-color-accent-pale); }
  .bg-primary-pale { background-color: var(--cs-color-primary-pale); }

  /* Overriding text-bold with the same value as brio, but only because
   * the above header change to font-weight overrides Brio's utilities too!
   */
  /*.text-bold {*/
  /*  font-weight: var(--font-weight-bold);*/
  /*}*/

  /** Utilities -- */
  .text-h1 {
    font-size: var(--step-4);
  }
  .text-h2 {
    font-size: var(--step-3);
  }
  .text-h3 {
    font-size: var(--step-2);
  }
  .text-h4 {
    font-size: var(--step-1);
  }
  .text-h5 {
    font-size: var(--step-0);
  }
}