/* ==========================================================================
   desktop-os-theme / tokens
   --------------------------------------------------------------------------
   This file is the single source of truth. Every literal value in the theme
   lives here exactly once. The Tailwind adapters next to it (theme.css for
   v4, preset.js for v3) hold no values of their own; they point at these
   custom properties with var().

   Each group is annotated with the creative-direction axis the choice serves.
   The four axes are tone register, aesthetic philosophy, audience
   relationship, and sensory ambition. Read them at
   https://rampstack.co/framework/creative-direction

   This theme is a shell: the tokens describe both a visual register (the
   modern-clean desktop) and the geometry of an operating-system chrome that
   shell/shell.css draws with them. The SHELL GEOMETRY group at the bottom is
   the part a register theme would not have.

   Contrast ratios in the comments are WCAG 2.1 relative-luminance figures,
   measured against the surface named. This theme has three light surfaces a
   reader will find text on (ground, window surface, window chrome), so
   foregrounds are quoted against the worst of the three where it matters.
   Every text pairing here clears AA.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     GROUND AND SCENE
     Aesthetic philosophy axis. The ground is the desktop itself: a warm
     bone, not a photograph and not a gradient sky, because a wallpaper
     competes with the windows sitting on it and the windows are the content.
     The scene color exists for one job: the dot grid shell.css draws on the
     desktop, faint enough to read as a surface texture rather than a
     pattern. It is deliberately far from 3:1 against the ground; it is
     texture, not information, and nothing may depend on seeing it.
     ---------------------------------------------------------------------- */
  --os-ground: #f2eee6;        /* the desktop */
  --os-scene: #e3ddd0;         /* dot-grid texture on the desktop, 1.17:1, decorative only */

  /* ----------------------------------------------------------------------
     SURFACES
     Aesthetic philosophy axis. A window is white so its content sits one
     clear step above the desktop; the chrome strip is a near-white warm so a
     title bar reads as part of the window without dissolving into it. The
     muted surface is for recessed things inside a window: code blocks,
     table stripes, the launcher panel rows.
     ---------------------------------------------------------------------- */
  --os-surface: #ffffff;        /* window body */
  --os-chrome: #f7f4ee;         /* title bar, taskbar */
  --os-surface-muted: #eeeadf;  /* recessed panels inside a window */

  /* ----------------------------------------------------------------------
     INK
     Audience relationship axis. Warm near-black rather than #000, so type
     on the warm ground reads as printed rather than pasted. Muted ink is
     quoted against its worst surface because secondary text appears on all
     of them.
       ink on surface 17.51:1, on chrome 15.95:1, on ground 15.13:1,
       on surface-muted 14.57:1
       ink-muted on surface 7.39:1, on chrome 6.73:1, on ground 6.38:1,
       on surface-muted 6.15:1
     ---------------------------------------------------------------------- */
  --os-ink: #1c1915;
  --os-ink-muted: #5c5546;

  /* ----------------------------------------------------------------------
     THE ACCENT
     Sensory ambition axis. Exactly one accent, a working cobalt, and it is
     spent on intent: the primary button, the focused window's title bar
     hairline, the focus ring, a link. The shell earns its playfulness from
     the metaphor, not from color count, which is what keeps a fake
     operating system on the Considered side of the sensory axis.
       white on accent 6.31:1. accent on surface 6.31:1, on ground 5.46:1
     ---------------------------------------------------------------------- */
  --os-accent: #2b50e0;
  --os-accent-ink: #ffffff;

  /* ----------------------------------------------------------------------
     DESTRUCTIVE
     Tone register axis. One red, for the action that deletes something and
     for invalid input, nothing else. The close control does NOT use it:
     closing a window is routine, not destructive, and a red close button
     teaches the reader to fear the most common thing they will do.
       white on destructive 5.76:1. destructive on surface 5.76:1
     ---------------------------------------------------------------------- */
  --os-destructive: #c2273a;
  --os-destructive-ink: #ffffff;

  /* ----------------------------------------------------------------------
     FLAT SEMANTIC FILLS
     Aesthetic philosophy axis. Badge fills pale enough to take full-strength
     ink text, so meaning lives in the hue and legibility never depends on
     it. Ink on every fill clears AA with room:
       success 13.85:1, info 13.44:1, warning 14.48:1, danger 12.78:1
     ---------------------------------------------------------------------- */
  --os-fill-success: #cdeec2;
  --os-fill-info: #cfe4f9;
  --os-fill-warning: #fce9a8;
  --os-fill-danger: #f9d3d7;

  /* ----------------------------------------------------------------------
     BORDER
     Aesthetic philosophy axis. Two weights of the same idea. The hairline
     (1.77:1 on surface) is deliberately quiet and carries only tidiness:
     where it divides a title bar from a body the surfaces already differ,
     and where it is the only divider, as between list rows, losing it
     blurs the rows together without costing any content. The strong
     border is the window outline and any control boundary that has to be
     findable on its own: 3.61:1 on surface and 3.12:1 on ground, clearing
     the 3:1 UI-component floor on both.
     ---------------------------------------------------------------------- */
  --os-border-width: 1px;
  --os-border: #c9c2b2;         /* hairline, decorative separation */
  --os-border-strong: #8f8672;  /* window outlines and control boundaries */

  /* ----------------------------------------------------------------------
     SHADOW
     Sensory ambition axis. Soft, blurred, and layered, which is the
     opposite decision from this collection's neobrutalism register and is
     made for the same reason: the shadow has to say what the surface is. A
     window floats above a desktop, so its shadow behaves like light. The
     ink components (28, 25, 21) are --os-ink; keep them in sync if you
     change the ink.
     ---------------------------------------------------------------------- */
  --os-shadow-sm: 0 1px 2px rgba(28, 25, 21, 0.1);
  --os-shadow-raised: 0 1px 2px rgba(28, 25, 21, 0.07),
    0 4px 12px -2px rgba(28, 25, 21, 0.12);
  --os-shadow-window: 0 1px 2px rgba(28, 25, 21, 0.08),
    0 12px 32px -8px rgba(28, 25, 21, 0.22);

  /* ----------------------------------------------------------------------
     RADIUS
     Audience relationship axis. Restrained: a 12px window corner reads as a
     modern OS, an 8px control sits level with the reader, and 4px keeps
     badges from going soft. Pill is reserved for avatars and toggles. Push
     the window radius past 16px and the shell stops being an operating
     system and starts being a toy.
     ---------------------------------------------------------------------- */
  --os-radius-tight: 4px;    /* badges, tags, keyboard hints */
  --os-radius: 8px;          /* buttons, inputs, icons, taskbar entries */
  --os-radius-window: 12px;  /* windows and the launcher panel */
  --os-radius-pill: 999px;

  /* ----------------------------------------------------------------------
     TYPE
     Tone register axis. System fonts, no webfont, no network request. The
     scale is sized for content that lives inside a window rather than
     across a full landing page, which is why the display size stops at
     2.75rem: a 52px headline inside a 760px window shouts at the furniture.
     Mono is the voice for file names, paths, and the taskbar clock,
     because a desktop without a mono voice somewhere is not trying.
     ---------------------------------------------------------------------- */
  --os-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --os-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --os-weight-body: 400;
  --os-weight-medium: 500;
  --os-weight-bold: 700;
  --os-weight-display: 750;

  --os-text-display: 2.75rem;  /* 44px */
  --os-text-h1: 2rem;          /* 32px */
  --os-text-h2: 1.5rem;        /* 24px */
  --os-text-h3: 1.1875rem;     /* 19px */
  --os-text-lead: 1.125rem;    /* 18px */
  --os-text-body: 1rem;        /* 16px, the floor for form inputs on iOS */
  --os-text-sm: 0.875rem;      /* 14px, the floor for any body content */
  --os-text-xs: 0.75rem;       /* 12px, labels, badges, icon captions */

  --os-leading-tight: 1.1;
  --os-leading-snug: 1.3;
  --os-leading-body: 1.6;

  --os-tracking-tight: -0.015em;
  --os-tracking-wide: 0.05em;

  /* ----------------------------------------------------------------------
     SPACE
     Aesthetic philosophy axis. A fixed scale, and window padding comes off
     it like everything else. The measure is the prose width inside a
     window; the window itself is sized in the shell geometry group below.
     ---------------------------------------------------------------------- */
  --os-space-1: 4px;
  --os-space-2: 8px;
  --os-space-3: 12px;
  --os-space-4: 16px;
  --os-space-6: 24px;
  --os-space-8: 32px;
  --os-space-12: 48px;
  --os-space-16: 64px;

  --os-measure: 66ch;

  /* ----------------------------------------------------------------------
     MOTION
     Sensory ambition axis. One idea: a window opens by arriving, a small
     rise and fade over 160ms, and everything else is instant. The shell
     could animate a dozen things; it animates one, and the restraint is
     what keeps the metaphor from becoming a screensaver. Under
     prefers-reduced-motion the block below zeroes the rise and collapses
     the duration, so windows appear in place, complete.
     ---------------------------------------------------------------------- */
  --os-duration: 160ms;
  --os-ease: cubic-bezier(0.2, 0, 0, 1);
  --os-open-rise: 10px;   /* how far below its resting place a window starts */

  /* ----------------------------------------------------------------------
     FOCUS
     Audience relationship axis. The ring is the accent, offset outside the
     element, so a keyboard user can tell focus from structure at a glance.
     Everything interactive in the shell shows it: icons, title-bar
     controls, taskbar entries, the launcher.
       ring against ground 5.46:1, well past the 3:1 UI floor
     ---------------------------------------------------------------------- */
  --os-ring: var(--os-accent);
  --os-ring-width: 3px;
  --os-ring-offset: 2px;

  /* ----------------------------------------------------------------------
     SHELL GEOMETRY
     The group a register theme would not have: the measurements of the
     operating system itself. shell/shell.css draws the chrome entirely from
     these, so re-skinning the shell is still a one-file edit.

     The cascade offset is what makes a second window read as a second
     window rather than a re-render of the first. The control size clears
     the 24px WCAG 2.5.8 target minimum with room; primary in-content
     buttons keep the 44px floor separately in components.css.
     ---------------------------------------------------------------------- */
  --os-titlebar-height: 44px;
  --os-control-size: 32px;       /* close and minimize buttons */
  --os-taskbar-height: 52px;
  --os-icon-size: 56px;          /* the glyph plate on a desktop icon */
  --os-icon-cell: 96px;          /* full icon including its caption */
  --os-window-width: 760px;
  --os-cascade: 28px;            /* per-window stagger of the pile */
  --os-scene-dot: 1.5px;         /* dot radius of the desktop texture */
  --os-scene-gap: 24px;          /* dot grid spacing */

  /* Layering. Windows are raised by shell.js within the open range; chrome
     sits above every window, and the skip link above everything. */
  --os-z-window: 10;      /* base of the window stack */
  --os-z-chrome: 30;      /* taskbar and launcher button */
  --os-z-launcher: 40;    /* the open launcher panel */
  --os-z-skip: 50;

  /* ----------------------------------------------------------------------
     PLAY: THE STICKY NOTE
     Tone register axis. The one sticker-class object the register ships: a
     paper note stuck to the desktop, tilted just enough to read as placed
     by hand. Two tilt steps so a second note would not land at the same
     angle and give the trick away. This is the earned playful touch; a
     second kind of sticker would start a collection, and a collection is a
     different register. Consumed by shell.css only; the Tailwind adapters
     leave these unmapped on purpose, and rotate-[var(--os-tilt-1)] is the
     arbitrary-value form if you want them there.
     ---------------------------------------------------------------------- */
  --os-tilt-1: -1.5deg;
  --os-tilt-2: 1deg;
  --os-note-size: 190px;
}

/* Anyone who has asked the operating system to stop animating gets windows
   that appear in place, complete, instantly. The shell still works; it just
   stops performing. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --os-duration: 1ms;
    --os-open-rise: 0px;
  }
}