/* Viscosity's design system: every colour, size and shape is named here once.
 * Change the look by changing these values, not individual pages.
 *
 * Direction (from the founder's reference, 8 Nov 2026): a pale misty-sky
 * background, frosted-glass cards with large rounded corners, black pill buttons
 * for main actions, white pills for the rest, light large type, and one
 * iridescent sheen used sparingly.
 *
 * Every stylesheet starts with the same layer order, so files can load in any order. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Type */
    --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.75rem;
    --text-2xl: 2.5rem;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 600;
    --leading: 1.5;

    /* Space (4px steps) */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Shape */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 25px;
    --radius-pill: 999px;

    /* Colour: light */
    --ink: #121316;
    --ink-soft: #3b3f46;
    --muted: #868b94;
    --line: rgb(18 19 22 / .08);
    --page: #e8eff3;
    --page-wash:
      radial-gradient(1200px 600px at 5% -10%, #c9dde9 0%, transparent 62%),
      radial-gradient(900px 520px at 100% 5%, #dfe4f0 0%, transparent 58%),
      radial-gradient(800px 500px at 60% 110%, #ece6ef 0%, transparent 60%),
      linear-gradient(180deg, #dbe8ef 0%, #ebeff2 55%, #f2f2f4 100%);
    --glass: rgb(255 255 255 / .5);
    --glass-strong: rgb(255 255 255 / .86);
    --glass-edge: rgb(255 255 255 / .8);
    --glass-blur: blur(18px) saturate(140%);
    --solid: #ffffff;
    --field: rgb(255 255 255 / .9);
    --shadow-soft: 0 10px 30px rgb(30 45 60 / .07), 0 1px 2px rgb(30 45 60 / .05);
    --shadow-lift: 0 18px 40px rgb(30 45 60 / .12);

    --action: #0d0e10;          /* main action (black pill) */
    --action-ink: #ffffff;
    --action-hover: #2a2c31;
    --focus: #7aa7ff;

    --positive: #1f9d55;
    --warning: #c27a00;
    --negative: #e0453a;
    --info: #4c6fff;

    /* The iridescent sheen: brand mark and small highlights only. */
    --sheen: linear-gradient(120deg, #ffd3a6 0%, #ffaccb 35%, #c9b6ff 68%, #a8d8ff 100%);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ink: #eef0f3;
      --ink-soft: #c9cdd4;
      --muted: #8f96a1;
      --line: rgb(255 255 255 / .08);
      --page: #0f1217;
      --page-wash:
        radial-gradient(1100px 520px at 8% -8%, #1b2633 0%, transparent 60%),
        radial-gradient(900px 480px at 100% 0%, #1d1d2b 0%, transparent 55%),
        linear-gradient(180deg, #11161d 0%, #0f1217 100%);
      --glass: rgb(32 37 46 / .58);
      --glass-strong: rgb(32 37 46 / .85);
      --glass-edge: rgb(255 255 255 / .07);
      --solid: #1a1e25;
      --field: rgb(20 24 30 / .9);
      --shadow-soft: 0 10px 30px rgb(0 0 0 / .3);
      --shadow-lift: 0 18px 40px rgb(0 0 0 / .45);
      --action: #f2f3f5;
      --action-ink: #0d0e10;
      --action-hover: #d9dbe0;
      --positive: #4cc985;
      --warning: #f0b14a;
      --negative: #ff7a6e;
    }
  }
}