/* ==========================================================================
   CLARKE VITALITY · DESIGN TOKENS
   The visual language. Everything else inherits from this file.
   ========================================================================== */

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

:root {
  /* --- TYPOGRAPHY --- */
  /* Three families, three jobs. */
  --font-display:  'Cinzel', 'Trajan Pro', serif;          /* Proper nouns, titling, the CLARKE wordmark */
  --font-serif:    'Cormorant Garamond', 'Garamond', serif;/* Editorial body, pull quotes, intentions */
  --font-sans:     'Montserrat', -apple-system, sans-serif;/* UI labels, metrics, data */

  /* --- TYPE SCALE --- */
  --fs-hero:       2.75rem;   /* 44px — pillar hero titles */
  --fs-h1:         2rem;      /* 32px — section headers */
  --fs-h2:         1.5rem;    /* 24px — subsection headers */
  --fs-h3:         1.125rem;  /* 18px — card titles */
  --fs-body:       0.9375rem; /* 15px — body text */
  --fs-small:      0.8125rem; /* 13px — labels, metadata */
  --fs-tiny:       0.6875rem; /* 11px — uppercase eyebrows */

  --lh-tight:      1.15;
  --lh-snug:       1.35;
  --lh-body:       1.55;
  --lh-loose:      1.75;

  --tracking-wide: 0.15em;    /* Uppercase eyebrows */
  --tracking-med:  0.05em;    /* Caps display */
  --tracking-tight: -0.01em;  /* Large display */

  /* --- COLOR · BASE PALETTE --- */
  /* Deep navy ground, warm ivory text, signature gold. */
  --ink-bg:        #0F1419;   /* Deepest — page background */
  --ink-surface:   #1A1F26;   /* Cards, sidebar */
  --ink-elevated: #232931;    /* Hover, active states */
  --ink-border:    #2D3540;   /* Subtle dividers */
  --ink-border-strong: #3A4452;
  --ink-line:      #1E2530;   /* Even subtler — sidebar internal lines */

  --text-primary:  #F4EFE3;   /* Warm ivory — primary text */
  --text-secondary:#B8B0A0;   /* Muted ivory — secondary */
  --text-tertiary: #7A7468;   /* Most muted — metadata */
  --text-faint:    #4D4A42;   /* Disabled, decoration */

  /* --- COLOR · SIGNATURE --- */
  --gold:          #C9A84C;   /* The Clarke gold — accents, highlights, the line that matters */
  --gold-soft:     #A88B3D;   /* Deeper gold — hover */
  --gold-glow:     rgba(201, 168, 76, 0.15); /* Gold halo */
  --gold-line:     rgba(201, 168, 76, 0.4);  /* Gold borders */

  /* --- COLOR · STATUS --- */
  --status-green:  #6B8E5A;   /* Optimal, on-track */
  --status-amber:  #C8973F;   /* Watch, attention */
  --status-red:    #B85450;   /* Action needed */
  --status-blue:   #5A7A9B;   /* Informational */

  /* --- COLOR · PER-PILLAR ACCENTS --- */
  /* Each pillar has its own color (master spec). */
  --pillar-identity: #5B8B7E;  /* Teal — Mind & Spirit */
  --pillar-eat:      #C9A84C;  /* Gold — Nutrition (matches signature) */
  --pillar-fuel:     #D49447;  /* Amber — Supplements */
  --pillar-train:    #7A9F5C;  /* Forest green — Fitness */
  --pillar-care:     #C08A8E;  /* Rose — Skin & Body */
  --pillar-rest:     #6B89AE;  /* Slate blue — Sleep & Recovery */
  --pillar-thrive:   #4E6B8A;  /* Deep navy — Longevity */
  --pillar-evolve:   #8FB893;  /* Sage cyber green — Biohacking */

  /* --- SPACING SCALE (8pt grid) --- */
  --s-1:  0.25rem;   /*  4px */
  --s-2:  0.5rem;    /*  8px */
  --s-3:  0.75rem;   /* 12px */
  --s-4:  1rem;      /* 16px */
  --s-5:  1.5rem;    /* 24px */
  --s-6:  2rem;      /* 32px */
  --s-7:  3rem;      /* 48px */
  --s-8:  4rem;      /* 64px */
  --s-9:  6rem;      /* 96px */

  /* --- LAYOUT --- */
  --sidebar-w:     320px;
  --content-max:   1100px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-pill:   999px;

  /* --- ELEVATION --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 24px var(--gold-glow);

  /* --- MOTION --- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:       150ms;
  --t-med:        280ms;
  --t-slow:       500ms;

  /* --- TOUCH TARGETS (mobile) --- */
  --touch-min:    44px;
}

/* ==========================================================================
   BASE RESET & TYPOGRAPHY DEFAULTS
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport for mobile */
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

p { margin: 0; }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

a { color: var(--gold); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--gold-soft); }

::selection {
  background: var(--gold);
  color: var(--ink-bg);
}

/* Scrollbar styling — keep it refined */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-border); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-border-strong); }

/* Hide scrollbar variant for horizontal pillar scrolls on mobile */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ==========================================================================
   TYPOGRAPHY UTILITY CLASSES
   ========================================================================== */

.t-display       { font-family: var(--font-display); letter-spacing: var(--tracking-med); }
.t-serif         { font-family: var(--font-serif); }
.t-serif-italic  { font-family: var(--font-serif); font-style: italic; }
.t-sans          { font-family: var(--font-sans); }
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.t-gold          { color: var(--gold); }
.t-muted         { color: var(--text-secondary); }
.t-faint         { color: var(--text-tertiary); }

/* ==========================================================================
   FOCUS STATES (accessibility — gold halo, no browser default)
   ========================================================================== */

*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}