/* ==========================================================================
   tokens.css — every colour, size and motion setting for the whole site.
   Change a value here and it updates everywhere (home page, dashboard,
   Documentation Hub). Nothing else needs editing to restyle the site.
   ========================================================================== */

:root {
  /* ---- 1. Accent (brass). Change these two lines to recolour the site. ---- */
  --accent-day:   #8A6A32;   /* used in Day mode   */
  --accent-night: #D3B17C;   /* used in Night mode */

  /* ---- 2. Day palette ---- */
  --day-bg:          #F5F4F1;
  --day-surface:     #FFFFFF;
  --day-surface-2:   #EDEBE6;
  --day-text:        #1D1D1F;
  --day-text-2:      #5F5F64;
  --day-text-3:      #6C6C71;
  --day-line:        rgba(0, 0, 0, 0.08);
  --day-line-strong: rgba(0, 0, 0, 0.16);
  --day-glass:       rgba(250, 249, 247, 0.72);
  --day-glass-strong: rgba(255, 255, 255, 0.96);
  --day-shadow:      rgba(30, 25, 15, 0.10);
  --day-risk-high:   #B0463B;
  --day-risk-mid:    #9A6417;
  --day-positive:    #3B7A55;
  --day-info:        #3E6FA8;

  /* ---- 3. Night palette ---- */
  --night-bg:          #0B0B0C;
  --night-surface:     #161618;
  --night-surface-2:   #1F1F22;
  --night-text:        #F2F2EF;
  --night-text-2:      #A0A0A5;
  --night-text-3:      #85858B;
  --night-line:        rgba(255, 255, 255, 0.09);
  --night-line-strong: rgba(255, 255, 255, 0.18);
  --night-glass:       rgba(18, 18, 20, 0.70);
  --night-glass-strong: rgba(30, 30, 33, 0.96);
  --night-shadow:      rgba(0, 0, 0, 0.45);
  --night-risk-high:   #E57E72;
  --night-risk-mid:    #E2A955;
  --night-positive:    #7FC29B;
  --night-info:        #8FB3E0;

  /* ---- 4. Type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display:  clamp(3.25rem, 2rem + 5.6vw, 6.5rem);  /* your name            */
  --fs-title:    clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); /* section headings   */
  --fs-headline: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);  /* card titles        */
  --fs-lead:     clamp(1.125rem, 1rem + 0.45vw, 1.375rem); /* intro tagline     */
  --fs-body:     1.0625rem;  /* 17px */
  --fs-callout:  0.9375rem;  /* 15px */
  --fs-footnote: 0.8125rem;  /* 13px */
  --fs-caption:  0.75rem;    /* 12px */

  /* Tracking: tighter as text gets bigger, slightly open when small */
  --track-display:  -0.04em;
  --track-title:    -0.025em;
  --track-headline: -0.015em;
  --track-small:     0.01em;

  /* ---- 5. Space and shape ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;    --space-7: 3rem;    --space-8: 4.5rem;
  --page-max: 1240px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --bar-h: 60px;

  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 32px;  --r-pill: 999px;

  /* ---- 6. Motion ----
     Springs are described the way Apple does it:
       response = how quickly it gets there (seconds, lower = snappier)
       damping  = 1 means no bounce; below 1 adds overshoot
     The JavaScript animations read these same numbers.
     Raise a response by 0.04 for a calmer feel, lower it for a snappier one. */
  --spring-response: 0.26;          /* expanders, tabs, highlight pills    */
  --spring-response-sides: 0.24;    /* Projects <-> Journey                */
  --spring-response-sheet: 0.3;     /* detail panel opening and closing    */
  --spring-response-scroll: 0.34;   /* jumping down to the sides on a tap  */
  --spring-damping: 1;
  --spring-damping-flick: 1;        /* after a fast swipe; 0.9 adds a hint of give */

  /* Fades and rises as things scroll into view */
  --dur-reveal: 420ms;
  --reveal-distance: 10px;

  /* CSS version of the same no-bounce spring, for hovers and presses */
  --ease-spring: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-quick: 160ms;
  --dur-ui: 300ms;
  --press-scale: 0.97;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, 0.0528, 0.1674, 0.3008, 0.4308, 0.5468, 0.6452, 0.7259, 0.7905, 0.8412, 0.8806, 0.9107, 0.9336, 0.9509, 0.9638, 0.9734, 0.9805, 0.9858, 0.9896, 0.9925, 0.9945, 0.996, 0.9971, 0.9979, 1);
  }
}

/* ---- Day mode (default) ---- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--day-bg);
  --surface: var(--day-surface);
  --surface-2: var(--day-surface-2);
  --text: var(--day-text);
  --text-2: var(--day-text-2);
  --text-3: var(--day-text-3);
  --line: var(--day-line);
  --line-strong: var(--day-line-strong);
  --glass: var(--day-glass);
  --glass-strong: var(--day-glass-strong);
  --shadow-color: var(--day-shadow);
  --accent: var(--accent-day);
  --risk-high: var(--day-risk-high);
  --risk-mid: var(--day-risk-mid);
  --positive: var(--day-positive);
  --info: var(--day-info);
  --on-accent: #FFFFFF;
}

/* ---- Night mode: follows the device until the visitor picks one ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--night-bg);
    --surface: var(--night-surface);
    --surface-2: var(--night-surface-2);
    --text: var(--night-text);
    --text-2: var(--night-text-2);
    --text-3: var(--night-text-3);
    --line: var(--night-line);
    --line-strong: var(--night-line-strong);
    --glass: var(--night-glass);
    --glass-strong: var(--night-glass-strong);
    --shadow-color: var(--night-shadow);
    --accent: var(--accent-night);
    --risk-high: var(--night-risk-high);
    --risk-mid: var(--night-risk-mid);
    --positive: var(--night-positive);
    --info: var(--night-info);
    --on-accent: #17140F;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--night-bg);
  --surface: var(--night-surface);
  --surface-2: var(--night-surface-2);
  --text: var(--night-text);
  --text-2: var(--night-text-2);
  --text-3: var(--night-text-3);
  --line: var(--night-line);
  --line-strong: var(--night-line-strong);
  --glass: var(--night-glass);
  --glass-strong: var(--night-glass-strong);
  --shadow-color: var(--night-shadow);
  --accent: var(--accent-night);
  --risk-high: var(--night-risk-high);
  --risk-mid: var(--night-risk-mid);
  --positive: var(--night-positive);
  --info: var(--night-info);
  --on-accent: #17140F;
}

/* ---- Derived colours (no need to edit) ---- */
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 38%, transparent);
  /* Slightly deeper versions for small text on tinted backgrounds (keeps contrast readable) */
  --accent-ink: color-mix(in srgb, var(--accent) 78%, var(--text));
  --positive-ink: color-mix(in srgb, var(--positive) 80%, var(--text));
  --info-ink: color-mix(in srgb, var(--info) 80%, var(--text));
  --shadow-sm: 0 1px 2px var(--shadow-color), 0 2px 8px color-mix(in srgb, var(--shadow-color) 50%, transparent);
  --shadow-md: 0 2px 6px var(--shadow-color), 0 12px 32px color-mix(in srgb, var(--shadow-color) 70%, transparent);
  --shadow-lg: 0 8px 24px var(--shadow-color), 0 32px 80px color-mix(in srgb, var(--shadow-color) 90%, transparent);
}

/* ---- Accessibility preferences ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --press-scale: 1; --dur-ui: 200ms; }
}
@media (prefers-contrast: more) {
  :root {
    --line: var(--line-strong);
    --text-2: var(--text);
  }
}