/* Cornerstone Stores — design tokens
   Mirrors the live tokens.css from the portal, with Google Font fallbacks
   substituted for Miller Banner / Brandon Grotesque (which ship as licensed
   .otf files in the real app). Drop the real @font-face block back in to
   restore — all variables are downstream of --font-display / --font-body.
*/

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* ——— Brand palette (preserved from the 2019 style guide) ——— */
  --flaxen:     #FCFAF1;
  --forrest:    #004645;
  --brick:      #7E4E2C;
  --rich-black: #000000;

  /* Derived / supporting tones */
  --flaxen-warm:  #F5F0E0;
  --flaxen-cool:  #EFEAD9;
  --forrest-deep: #003433;
  --forrest-tint: #1F5E5C;
  --brick-deep:   #5E3920;
  --brick-tint:   #A47656;
  --sand:         #C8B89A;
  --concrete:     #9AA09B;
  --ink:          #1A1A1A;
  --hairline:      rgba(0,70,69,0.14);
  --hairline-soft: rgba(0,70,69,0.08);
  --hairline-strong: rgba(0,70,69,0.22);

  /* ——— Status tones — soft washes tuned to the warm palette ———
     Each has a tint (fill), ink (text/icon), and edge (border).
     Light enough to feel quiet, dark enough to pass AA at 11–13px. */
  --status-success-tint: #DDE8D2;   /* sage on flaxen */
  --status-success-ink:  #3F5A24;
  --status-success-edge: #B7CCA3;

  --status-warning-tint: #F7E4B6;   /* warm amber, not citrus */
  --status-warning-ink:  #6E4A0F;
  --status-warning-edge: #E2C77E;

  --status-danger-tint:  #F2D2C7;   /* muted rust, harmonises with brick */
  --status-danger-ink:   #7A2E13;
  --status-danger-edge:  #DDB1A0;

  --status-info-tint:    #D7E1E0;   /* pale forrest */
  --status-info-ink:     #1F4948;
  --status-info-edge:    #ADBFBE;

  --status-neutral-tint: #ECE6D2;   /* draft — flaxen deep */
  --status-neutral-ink:  #5C5640;
  --status-neutral-edge: #D5CDB1;

  /* Semantic */
  --bg:         var(--flaxen);
  --bg-alt:     var(--flaxen-warm);
  --bg-card:    #FFFEF6;        /* a hair lighter than flaxen, for cards */
  --bg-inverse: var(--forrest);
  --fg1:        var(--forrest);
  --fg2:        #2E4A48;
  --fg3:        #6B7776;
  --fg-on-dark: var(--flaxen);
  --accent:     var(--brick);
  --border:     var(--hairline);

  /* Type families */
  --font-display: "Cormorant Garamond", "Miller Banner", "Playfair Display", Georgia, serif;
  --font-body:    "Inter", "Brandon Grotesque", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --fs-display:   clamp(56px, 9vw, 128px);
  --fs-h1:        clamp(40px, 5vw, 64px);
  --fs-h2:        clamp(26px, 3vw, 36px);
  --fs-h3:        20px;
  --fs-sub:       13px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-micro:     11px;

  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body:    1.55;

  --tracking-tight: -0.01em;
  --tracking-body:  0;
  --tracking-caps:  0.18em;

  /* Spacing (8-pt base + 4-pt half-step) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Radii — architectural, mostly squared */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* Shadows — only for floats / modals */
  --shadow-1: 0 1px 2px rgba(0,70,69,0.06);
  --shadow-2: 0 6px 18px rgba(0,70,69,0.10);
  --shadow-3: 0 18px 40px rgba(0,70,69,0.14);

  /* Layout */
  --page-max: 1120px;
  --gutter:   var(--s-5);
  --header-h: 56px;
}

/* ——— Base typographic resets ——— */
*, *::before, *::after { box-sizing: border-box; }

html { color: var(--fg1); background: var(--bg); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; }

h1, .display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg1);
}

h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg1);
}

.eyebrow, .cta, .label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sub);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg1);
}

p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }

small, .meta { font-size: var(--fs-small); color: var(--fg3); }

a {
  color: var(--forrest);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 120ms ease;
}
a:hover { opacity: 0.7; }

hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s-6) 0; }

::selection { background: var(--forrest); color: var(--flaxen); }

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; }