/*
 * Design tokens for agheli.design.
 * Colours come from the Figma source page "PDF · layout" (167:2).
 * Type sizes come from the reference sites (krystianzun.com, andyryanweir.com,
 * denizors.design), measured 2026-10-13. Each value says where it comes from.
 */

:root {
  /* ---------- Fonts ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (size / line height) ---------- */
  --text-xs: 12px;      --leading-xs: 16px;    /* chips, tags: Krystian 12/16 */
  --text-sm: 14px;      --leading-sm: 21px;    /* meta, captions, menu: Krystian body, Andy meta */
  --text-base: 16px;    --leading-base: 26px;  /* body: Andy 16/26.4 */
  --text-lg: 18px;      --leading-lg: 28px;    /* subtitle, lead: Andy 18/29.7 */
  --text-xl: 20px;      --leading-xl: 28px;    /* section heading: between Andy 16 and Deniz 31 */
  --text-2xl: 24px;     --leading-2xl: 32px;   /* case-study title, band numbers: between Andy 16 and Deniz 40 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-caps: 0.06em;   /* caps labels: PDF 4–6 %, Andy 0.02em, Deniz 0.08em */

  /* ---------- Colours: light pages ---------- */
  --color-bg: #FFFFFF;
  --color-text-strong: #262626;   /* names, titles, headings */
  --color-text: #525252;          /* body */
  --color-text-muted: #6B6B6B;    /* subtitles, meta (was #737373; 4.85:1 on the card greys) */
  --color-text-faint: #707070;    /* labels, years, menu numbers (was #A3A3A3, 2.5:1 — too light for text) */
  --color-line: #E5E5E5;          /* dividers */
  --color-line-strong: #D4D4D4;   /* menu line and dots */
  --color-surface: #F2F2F2;       /* light pills and buttons */
  --color-card: #F4F4F4;          /* image card frame (Figma 187:220) */
  --color-card-line: #ECECEC;     /* image card outline (Figma 187:220) */
  --logo-tile: #111111;           /* logo tile on light pages (Figma 187:7) */
  --logo-mark: #FFFFFF;
  --color-panel: #FAFAFA;         /* cards on the How I work with AI page */
  --color-panel-line: #E5E5E5;
  --accent-ai: #9D4EDD;           /* AI icons: Sara's lilac #CB8AF8, darker so it reads on white */
  --status-shipped: #2F8F5B;      /* commerce map dots (Figma 235:2) */
  --status-designed: #C98A1B;

  /* Diagrams built in HTML (design system 217:22, HumanOS money 137:2) */
  --dg-bg: #FAFAFA;
  --dg-group: #F4F4F5;
  --dg-card: #FFFFFF;
  --dg-line: #E4E4E7;
  --dg-line-strong: #D4D4D8;
  --accent-ds: #145A8F;           /* design-system diagram: Sara's light blue #8ACEF8, darker for white */
  --st-paid: #08775C;             /* HumanOS statuses: #2CCBA2, #CBD5E1, #60A5FA, #FBBF24, darker for white */
  --st-held: #5B6B80;
  --st-returned: #1E50D0;
  --st-review: #94600A;           /* all four ≥ 4.5:1 on their own tinted pill */

  /* ---------- Colours: dark "At a glance" band ---------- */
  --band-bg: #141414;
  --band-card: #1F1F1F;
  --band-text-strong: #F5F5F5;
  --band-text: #EDEDED;
  --band-text-muted: #A3A3A3;

  /* ---------- Colours: status chips (grey scale by how far the work went) ---------- */
  --chip-shipped-bg: #3F3F3F;     --chip-shipped-text: #FFFFFF;
  --chip-pilot-bg: #6B6B6B;       --chip-pilot-text: #FFFFFF;
  --chip-progress-bg: #BDBDBD;    --chip-progress-text: #1F1F1F;
  --chip-designed-bg: #E6E6E6;    --chip-designed-text: #262626;
  --chip-own-bg: #FAFAFA;         --chip-own-text: #262626;   --chip-own-line: #D4D4D4;

  /* ---------- Layout ---------- */
  --column: 576px;          /* text column: Andy 576 */
  --column-wide: 960px;     /* wide diagrams */
  --menu-width: 236px;      /* side menu: Deniz 236 */
  --gutter: 20px;           /* phone side margin: Deniz 20 */

  /* ---------- Spacing (4 px steps) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---------- Corners ---------- */
  --radius-sm: 8px;         /* small images: Krystian 8 */
  --radius-md: 12px;        /* inner image corner: Andy 12 */
  --radius-lg: 16px;        /* cards: Andy 16 */
  --radius-xl: 24px;        /* dark "At a glance" panel */
  --radius-pill: 999px;     /* chips, buttons */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);     /* Krystian revealIn */
  --ease-press: cubic-bezier(0.23, 1, 0.32, 1);   /* Deniz buttons */
  --duration-press: 160ms;                         /* Deniz buttons */
  --duration-hover: 250ms;                         /* Deniz cards 0.2–0.25 s */
  --duration-reveal: 600ms;                        /* Deniz sections 0.6 s, Krystian 0.7 s */
}

:root {
  color-scheme: light;
}

/*
 * Dark theme (Sara, 2026-10-13: every page follows the theme).
 * Colours from andyryanweir.com: #141414 page, #EDEDED / #A3A3A3 / #737373 text.
 * It applies when the visitor's system is dark and they have not picked light,
 * or when they picked dark with the toggle (data-theme on <html>, see js/theme.js).
 * The two blocks below are the same list; keep them in sync.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #141414;
    --color-text-strong: #EDEDED;
    --color-text: #BDBDBD;
    --color-text-muted: #A3A3A3;
    --color-text-faint: #8F8F8F;    /* ≥ 4.5:1 on every dark surface */
    --color-line: #2A2A2A;
    --color-line-strong: #3D3D3D;
    --color-surface: #222222;
    --color-card: #1C1C1C;
    --color-card-line: #2A2A2A;
    --logo-tile: #FFFFFF;           /* white tile, black letters (PDF round 7) */
    --logo-mark: #111111;
    --band-bg: #1B1B1B;
    --band-card: #262626;
    --band-line: #2A2A2A;
    --color-panel: #1B1B1B;
    --color-panel-line: #2A2A2A;
    --accent-ai: #CB8AF8;           /* Sara's lilac (PDF page 9) */

    --dg-bg: #18181B;
    --dg-group: #1F1F23;
    --dg-card: #26262B;
    --dg-line: #2C2C31;
    --dg-line-strong: #3F3F46;
    --accent-ds: #8ACEF8;
    --st-paid: #2CCBA2;
    --st-held: #CBD5E1;
    --st-returned: #60A5FA;
    --st-review: #FBBF24;
    --chip-shipped-bg: #E6E6E6;     --chip-shipped-text: #141414;
    --chip-pilot-bg: #BDBDBD;       --chip-pilot-text: #141414;
    --chip-progress-bg: #6B6B6B;    --chip-progress-text: #FFFFFF;
    --chip-designed-bg: #3A3A3A;    --chip-designed-text: #EDEDED;
    --chip-own-bg: #1C1C1C;         --chip-own-text: #EDEDED;   --chip-own-line: #4A4A4A;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #141414;
  --color-text-strong: #EDEDED;
  --color-text: #BDBDBD;
  --color-text-muted: #A3A3A3;
  --color-text-faint: #8F8F8F;
  --color-line: #2A2A2A;
  --color-line-strong: #3D3D3D;
  --color-surface: #222222;
  --color-card: #1C1C1C;
  --color-card-line: #2A2A2A;
  --logo-tile: #FFFFFF;
  --logo-mark: #111111;
  --band-bg: #1B1B1B;
  --band-card: #262626;
  --band-line: #2A2A2A;
  --color-panel: #1B1B1B;
  --color-panel-line: #2A2A2A;
  --accent-ai: #CB8AF8;

  --dg-bg: #18181B;
  --dg-group: #1F1F23;
  --dg-card: #26262B;
  --dg-line: #2C2C31;
  --dg-line-strong: #3F3F46;
  --accent-ds: #8ACEF8;
  --st-paid: #2CCBA2;
  --st-held: #CBD5E1;
  --st-returned: #60A5FA;
  --st-review: #FBBF24;
  --chip-shipped-bg: #E6E6E6;     --chip-shipped-text: #141414;
  --chip-pilot-bg: #BDBDBD;       --chip-pilot-text: #141414;
  --chip-progress-bg: #6B6B6B;    --chip-progress-text: #FFFFFF;
  --chip-designed-bg: #3A3A3A;    --chip-designed-text: #EDEDED;
  --chip-own-bg: #1C1C1C;         --chip-own-text: #EDEDED;   --chip-own-line: #4A4A4A;
}

/* Phones */
@media (max-width: 600px) {
  :root {
    --text-xl: 18px;    --leading-xl: 26px;
    --text-2xl: 22px;   --leading-2xl: 30px;
  }
}