/* =========================================================================
   Design tokens
   -------------------------------------------------------------------------
   Two layers:
     1. Primitives — raw scale values. Never reference these in component
        styles; they exist only to be mapped by the semantic layer below.
     2. Semantic   — role-based aliases. These are what styles.css consumes.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Primitives
   ---------------------------------------------------------------------- */

:root {
  /* Type scale — ~1.2 ratio off a 1rem (16px) base, rounded to whole px. */
  --font-size-100: 0.875rem;  /* 14px */
  --font-size-200: 1rem;      /* 16px — base */
  --font-size-300: 1.125rem;  /* 18px */
  --font-size-400: 1.25rem;   /* 20px */
  --font-size-500: 1.5rem;    /* 24px */
  --font-size-600: 1.875rem;  /* 30px */
  --font-size-700: 2.25rem;   /* 36px */

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

  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.4;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.65;

  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.22em;

  --font-family-sans: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-family-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale — 4px increments. */
  --space-100: 0.25rem;  /* 4px */
  --space-200: 0.5rem;   /* 8px */
  --space-300: 0.75rem;  /* 12px */
  --space-400: 1rem;     /* 16px */
  --space-500: 1.25rem;  /* 20px */
  --space-600: 1.5rem;   /* 24px */
  --space-800: 2rem;     /* 32px */
  --space-1000: 2.5rem;  /* 40px */
  --space-1200: 3rem;    /* 48px */
  --space-1600: 4rem;    /* 64px */

  /* Palette — Riacore brand, sampled from riacore.com */
  --color-ink: #eef1f5;
  --color-muted: #98a2b3;
  --color-plate: #191c25;      /* page background, matches the logo plate */
  --color-surface: #20242e;    /* lifted one step off the page           */
  --color-sunken: #171a22;     /* recessed one step                      */
  --color-line: #333844;
  --color-line-strong: #3d4551; /* slate from the logo mark              */
  --color-teal: #7fcdc8;        /* primary accent from the logo mark     */
  --color-teal-light: #98d8d4;
  --color-teal-dark: #16303a;   /* dark ink on teal — AAA contrast       */
  --color-amber: #fdc566;       /* secondary accent from the logo mark   */

  /* Light-mode derivations. The brand palette is dark-only, so these are
     tuned rather than sampled — each holds WCAG AA on --color-paper. */
  --color-paper: #f4f6f8;
  --color-paper-raised: #ffffff;
  --color-muted-dark: #4d5766;
  --color-teal-deep: #1f6b64;
  --color-plate-alpha-14: rgba(25, 28, 37, 0.14);

  /* Sizing */
  --size-avatar: 200px;
  --size-icon: 28px;
  --size-icon-small: 20px;
  --size-control: 44px;   /* minimum comfortable tap target */
  --size-measure: 640px;

  --duration-fast: 0.15s;
}

/* -------------------------------------------------------------------------
   2. Semantic tokens
   ---------------------------------------------------------------------- */

:root {
  /* Type ramp. Strictly descending:
     h1 > h2 > h3 > p.lead > body/list. */
  --font-size-heading-1: var(--font-size-700);
  --font-size-heading-2: var(--font-size-500);
  --font-size-heading-3: var(--font-size-400);
  --font-size-lead: var(--font-size-300);
  --font-size-body: var(--font-size-200);

  /* Wordmark — the name lockup. A brand element with its own display
     treatment, deliberately outside the heading ramp above. Fluid so the
     long uppercase string never overflows narrow viewports. */
  --font-family-wordmark: var(--font-family-display);
  --font-size-wordmark: clamp(var(--font-size-500), 9vw, var(--font-size-700));
  --font-weight-wordmark: var(--font-weight-medium);
  --line-height-wordmark: var(--line-height-none);

  --font-weight-heading: var(--font-weight-semibold);
  --font-weight-lead: var(--font-weight-medium);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-emphasis: var(--font-weight-semibold);

  --line-height-heading: var(--line-height-tight);
  --line-height-lead: var(--line-height-snug);
  --line-height-body: var(--line-height-relaxed);
  --line-height-list: var(--line-height-normal);

  /* Colors. Each token resolves via light-dark(<light>, <dark>), driven by
     the color-scheme below — so the theme switch is a single property change
     rather than a duplicated block of overrides.

     "dark light" makes dark the preferred default, matching riacore.com,
     while still honouring an explicit system preference for light. */
  color-scheme: dark light;

  --color-background: light-dark(var(--color-paper), var(--color-plate));
  --color-text-primary: light-dark(var(--color-plate), var(--color-ink));
  --color-text-body: light-dark(var(--color-muted-dark), var(--color-muted));
  --color-border: light-dark(var(--color-plate-alpha-14), var(--color-line));
  --color-accent: light-dark(var(--color-teal-deep), var(--color-teal));
  --color-accent-hover: light-dark(var(--color-teal-dark), var(--color-amber));
  --color-surface-raised: light-dark(var(--color-paper-raised), var(--color-surface));

  /* Floating theme toggle. The control is out of flow, so the page has to
     reserve room for it explicitly or content runs underneath.
     `inset` is its distance from the corner; `clearance` is the vertical
     space the page must leave free, derived from it. */
  --space-control-inset: var(--space-600);
  --space-control-clearance: calc(
    var(--size-control) + var(--space-control-inset) * 2 +
    env(safe-area-inset-bottom, 0px)
  );
}

@media (max-width: 600px) {
  :root {
    --space-control-inset: var(--space-400);
  }
}

/* Manual override, set by the theme toggle. Absent this attribute the site
   follows the system preference. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }