/*
  Design tokens. Every color, size and duration in the UI comes from here.
  Change a value here, not in components.css. Language: "Yumuşak" (soft),
  see design/docs/language.md.

  Colors are written once with light-dark(): the browser picks the side from
  color-scheme. The page is light; the theme switch (data-theme="dark" on
  <html>, kept in the gtd_theme cookie) turns it dark. Every text pair passes WCAG AA
  (checked by the design lab, make lab-sheet).
*/
@layer tokens, base, layout, components, utilities;

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Display face for page titles, big numbers and the wordmark. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

    /* Type: Atkinson for reading, Bricolage for display; minor-third scale (1.2). */
    --font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Bricolage Grotesque", var(--font-sans);
    --display-weight: 760;
    --display-tracking: -0.03em;
    --step--1: 0.833rem;
    --step-0: 1rem;
    --step-1: 1.2rem;
    --step-2: 1.44rem;
    --step-3: 1.728rem;
    --step-4: 2.074rem;
    --step-5: 2.488rem;
    --leading-tight: 1.12;
    --leading-snug: 1.3;
    --leading-body: 1.55;

    /* Space: 4px base. */
    --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;

    /* Shape: round and soft. Buttons and chips are pills; fields stay a rounded box. */
    --radius-control: 14px;
    --radius-sheet: 24px;
    --radius-tile: 22px;
    --radius-paper: 12px; /* a note as paper (piles, spreads, a project's steps, the month's days): smaller than a sheet, on purpose */
    --radius-pill: 999px;
    --radius-button: var(--radius-pill);
    --radius-chip: var(--radius-pill);

    /* Color: warm paper by day, graphite at night, one soft indigo accent. light-dark(light, dark). */
    --bg: light-dark(#F6F5F2, #16171A);
    --surface: light-dark(#FFFFFF, #1F2024);
    --surface-2: light-dark(#EEEDE8, #292A2F);
    --ink: light-dark(#2A2A31, #ECECEE);
    --ink-2: light-dark(#56555F, #B8B9C0);
    --ink-3: light-dark(#696873, #9A9BA4);
    --rule: light-dark(#E4E3DD, #2E2F35);
    --rule-strong: light-dark(#8C8A94, #6E6F79);
    --accent: light-dark(#5458C4, #A7ADF2);
    --accent-hover: light-dark(#4448AE, #BEC3F6);
    --accent-ink: light-dark(#FFFFFF, #15172B);
    --accent-soft: light-dark(#ECEDF9, #2B2E48);
    /* Brand panel (login, register): the accent by day, a deep indigo at night so it does not glare. */
    --brand: light-dark(#4C50B5, #262944);
    --brand-ink: light-dark(#FFFFFF, #ECECEE);
    --danger: light-dark(#B3364F, #F0A2AF);
    --danger-soft: light-dark(#FBE9EC, #3B2328);
    --success: light-dark(#2A7553, #86D0AE);
    --success-soft: light-dark(#E2F2EA, #1E3229);
    --area-work: light-dark(#3F5BC4, #AAB8F2);
    --area-work-soft: light-dark(#E6EBFA, #262E4C);
    --area-life: light-dark(#A8406F, #EBA6C4);
    --area-life-soft: light-dark(#F8E7EE, #3C2532);
    --area-chore: light-dark(#8C5A1C, #E8C08E);
    --area-chore-soft: light-dark(#F6ECDD, #3A2F20);

    --shadow-sheet: 0 1px 2px light-dark(rgb(42 42 49 / 0.06), rgb(0 0 0 / 0.4)), 0 14px 32px -18px light-dark(rgb(42 42 49 / 0.22), rgb(0 0 0 / 0.75));
    --shadow-lift: 0 14px 30px -12px light-dark(rgb(42 42 49 / 0.3), rgb(0 0 0 / 0.75));
    --focus-ring: 0 0 0 3px light-dark(rgb(84 88 196 / 0.85), rgb(167 173 242 / 0.7)); /* 3:1 on every ground: bg, surface, surface-2, accent-soft (a design test) */
    --veil: color-mix(in oklab, var(--bg) 60%, transparent); /* the desk under an open drawer */
    --peek: 28px; /* how far the Inbox drawer shows itself on the first-run peek */
    --toast-h: 5rem; /* the room an undo notice takes at the bottom of a page (the notice and its gap) */

    /* Motion: short UI transitions. */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --fast: 120ms;
    --base: 220ms;
    --reveal: 300ms; /* a part that shows or hides grows or closes its room (motion.md: "Görünmez → görünür") */
    --slow: 900ms;

    /* Motion: the moments (design/docs/motion.md). A --spring-* token is the
       source (stiffness damping mass, also usable by video tools); its --ease-*
       linear() curve and --dur-* come from `go run -C design ./cmd/spring k c`,
       and a design test fails if they drift apart. */
    --dur-fly: 620ms;
    --dur-fly-min: 380ms; /* short throws (capture line to its handle) are quicker */
    --ease-fly: cubic-bezier(0.5, 0, 0.3, 1);
    --fly-arc: 0.45;
    --fly-arc-min: 24px;
    --fly-shrink: 0.55; /* scale curve t^n: below 1 the note shrinks early */
    --fly-tilt: 0;
    --spring-hop: 380 18 1; /* 775ms, overshoot 19% */
    --dur-hop: 775ms;
    --ease-hop: linear(0, 0.1212, 0.3916, 0.692, 0.9435, 1.1089, 1.1851, 1.1899, 1.1504, 1.0927, 1.0369, 0.9947, 0.9703, 0.9621, 0.9656, 0.9754, 0.9869, 0.9968, 1.0035, 1.0068, 1.0073, 1.006, 1.0038, 1.0017, 1, 0.999, 0.9986, 0.9987, 1);
    --hop-scale: 1.1;
    --hop-lift: -6px;
    --hop-squash: 0.04;
    --spring-appear: 420 24 1; /* 591ms, overshoot 10.3% */
    --dur-appear: 591ms;
    --ease-spring: linear(0, 0.0784, 0.2588, 0.4747, 0.6807, 0.851, 0.9751, 1.0535, 1.093, 1.1034, 1.0947, 1.0758, 1.0534, 1.0322, 1.0148, 1.0022, 0.9942, 0.9903, 0.9893, 0.9903, 0.9923, 0.9946, 0.9968, 0.9985, 0.9998, 1.0006, 1.001, 1.0011, 1);
    --dur-step: 520ms;
    --ease-step: cubic-bezier(0.34, 1.3, 0.64, 1);
    --dur-count: 420ms;
  }

  :root[data-theme="dark"] { color-scheme: dark; }

  /* Tones: the eight colors a user picks for areas and buckets. An element with
     data-hue="1".."8" gets --tone (text, icon) and --tone-soft (fill); 0 is the
     neutral inbox. The formula keeps every tone legible in both themes. */
  [data-hue] {
    --tone: light-dark(oklch(0.48 0.12 var(--h)), oklch(0.84 0.09 var(--h)));
    --tone-soft: light-dark(oklch(0.95 0.03 var(--h)), oklch(0.29 0.032 var(--h)));
  }
  [data-hue="1"] { --h: 268; }
  [data-hue="2"] { --h: 355; }
  [data-hue="3"] { --h: 70; }
  [data-hue="4"] { --h: 150; }
  [data-hue="5"] { --h: 205; }
  [data-hue="6"] { --h: 305; }
  [data-hue="7"] { --h: 35; }
  [data-hue="8"] { --h: 112; }
  [data-hue="0"] { --tone: var(--ink-2); --tone-soft: var(--surface-2); }
}