/* ==========================================================================
   Open Shelf - design tokens
   --------------------------------------------------------------------------
   The single source of truth for the theme. This file declares values only;
   it contains no selectors that style page elements. Everything visual in
   global.css reads from here, so a re-theme is an edit to this file alone.

   The values implement the Open Shelf brand system (design/ at the repo
   root): coral acts, teal structures, navy is the ink. Coral is rationed to
   one primary action per view; teal carries section labels, icon fills and
   avatars; surfaces layer warm-to-neutral (sand-tint hero, light-gray
   canvas, white cards).

   Naming:
     --os-<group>-<role>      raw scale values (palette, sizes, ramps)
     --<semantic>             role tokens the components actually consume

   Components must reference the semantic layer, never the raw scale.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------- palette
     Brand core: coral #FF6A4D, teal #2D7D7A, deep navy #1A1F36, sand
     #DCCFBF. Neutrals are the navy-cast slate ramp from the brand text
     colors, not warm browns. */

  --os-navy-900: #1A1F36;
  --os-navy-700: #3A405A;
  --os-navy-600: #565D75;
  --os-navy-500: #7A8093;
  --os-navy-400: #A9AEC2;
  --os-navy-300: #C9CDD4;

  --os-coral-700: #DE4B2F;
  --os-coral-600: #EF5A3D;
  --os-coral-500: #FF6A4D;
  --os-coral-200: #FFCFC3;
  --os-coral-100: #FFECE7;

  --os-teal-600: #256966;
  --os-teal-500: #2D7D7A;
  --os-teal-200: #BEDBD9;
  --os-teal-100: #DDEDEC;

  --os-sand-500: #DCCFBF;
  --os-sand-100: #FBF5EE;

  --os-gray-100: #F1F3F5;
  --os-gray-200: #E7E9EC;

  --os-star-500: #F5A623;

  /* On-inverse ramp. The book detail page runs full-bleed navy bands, and the
     design draws them the same way in light and dark - a dark band is a dark
     band. These values therefore do NOT flip with the theme, which is why they
     live in the raw scale and have no semantic alias. Anything painted on a
     navy band reads from here; anything on a page surface does not. */
  --os-ink-surface: var(--os-navy-900);
  --os-ink-raised: #242A45;
  --os-ink-rule: #383E58;
  --os-ink-track: #2C3350;
  --os-ink-band: #414A6E;
  --os-ink-text: var(--os-sand-100);
  --os-ink-text-muted: #B9BECE;
  --os-ink-text-subtle: #8A8FA8;
  --os-ink-teal: #7FBEBB;
  --os-ink-coral: #FF8B74;

  /* ------------------------------------------------------------------ type
     Poppins 600-700 for display (headlines, nav brand, card titles), Inter
     for everything read. Loaded from the Google Fonts CDN in each page head;
     the stacks below fall back to system sans while the files arrive. */

  --os-font-display: "Poppins", ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --os-font-body: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --os-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type ramp - the brand scale 48/36/28/22/18/16/14/12, fluid between
     380px and 1200px viewports so the display sizes ease down on phones. */
  --os-text-2xs: 0.6875rem;
  --os-text-xs:  0.75rem;
  --os-text-sm:  0.875rem;
  --os-text-md:  1rem;
  --os-text-lg:  1.125rem;
  --os-text-xl:  clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
  --os-text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  --os-text-3xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);
  --os-text-4xl: clamp(2.1rem, 1.4rem + 2.8vw, 3rem);

  --os-weight-regular: 400;
  --os-weight-medium: 500;
  --os-weight-semibold: 600;
  --os-weight-bold: 700;

  --os-leading-tight: 1.15;
  --os-leading-snug: 1.3;
  --os-leading-normal: 1.5;
  --os-leading-relaxed: 1.65;

  /* Poppins headlines track -0.015 to -0.02em; caps labels track wide. */
  --os-tracking-tight: -0.015em;
  --os-tracking-normal: 0;
  --os-tracking-wide: 0.04em;
  --os-tracking-caps: 0.09em;
  --os-tracking-tagline: 0.14em;

  /* ----------------------------------------------------------------- space
     4px base. Every margin, padding and gap comes from this scale. */
  --os-space-0: 0;
  --os-space-1: 0.25rem;
  --os-space-2: 0.5rem;
  --os-space-3: 0.75rem;
  --os-space-4: 1rem;
  --os-space-5: 1.5rem;
  --os-space-6: 2rem;
  --os-space-7: 2.5rem;
  --os-space-8: 3rem;
  --os-space-9: 4rem;
  --os-space-10: 6rem;

  /* ---------------------------------------------------------------- shape
     The brand guide's radii (8/12/16/999) were drawn before the house style
     settled, and the page they produced read as bubbly. The scale is now
     capped at 8px - every corner on the site, no exceptions - and most
     components sit below it. Corners still exist, they are just quiet.

     --os-radius-bar is separate on purpose. Tracks, fills and markers are
     instrument parts, not surfaces: at 2px they read as a measurement, and
     at any rounder value they read as a toy. */
  --os-radius-xs: 2px;
  --os-radius-sm: 4px;
  --os-radius-md: 6px;
  --os-radius-lg: 8px;
  --os-radius-xl: 8px;
  --os-radius-bar: 2px;
  /* Kept under its old name so the 18 call sites do not all have to churn.
     It is no longer a pill: it is the ceiling, and it applies to the chips,
     tags and round-cornered controls that used to be stadiums. */
  --os-radius-pill: 8px;

  --os-border-hair: 1px;
  --os-border-mid: 1.5px;
  --os-border-thick: 2px;

  /* --------------------------------------------------------------- shadows
     One soft card shadow, lifting on hover. Tinted with the navy ink. */
  --os-shadow-sm: 0 2px 10px rgba(26, 31, 54, 0.06);
  --os-shadow-md: 0 4px 16px rgba(26, 31, 54, 0.10);
  --os-shadow-lg: 0 12px 32px rgba(26, 31, 54, 0.14);
  --os-shadow-book: 0 10px 22px rgba(26, 31, 54, 0.18);

  /* ---------------------------------------------------------------- motion
     Quiet: 150ms ease colour/shadow transitions only. No bounces. */
  --os-duration-fast: 150ms;
  --os-duration-base: 150ms;
  --os-duration-slow: 300ms;
  --os-ease-out: ease;
  --os-ease-in-out: ease-in-out;

  /* ---------------------------------------------------------------- layout */
  --os-container-sm: 42rem;
  --os-container-md: 62rem;
  --os-container-lg: 78rem;
  --os-gutter: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);
  --os-header-height: 4rem;

  /* Minimum hit area for a touch target. Applied to the control atoms under
     `@media (pointer: coarse)` so desktop keeps the designed density. */
  --os-tap-min: 2.75rem;

  --os-z-base: 0;
  --os-z-sticky: 100;
  --os-z-header: 200;
  --os-z-overlay: 300;

  /* =======================================================================
     Semantic layer

     One theme, and it is light. The brand guide defines light only; a dark
     theme keyed to the navy ink used to live at the foot of this file behind
     a prefers-color-scheme query and a data-theme override, with a toggle in
     the header. Both are gone - the site is light for everyone, so nothing
     reads the OS preference and nothing writes data-theme.

     color-scheme is declared rather than left to the browser: it keeps form
     controls, scrollbars and the caret light on a machine set to dark, which
     is the one place the OS preference could still reach the page.
     ======================================================================= */

  color-scheme: light;

  --color-canvas: var(--os-gray-100);
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: var(--os-gray-100);
  --color-surface-warm: var(--os-sand-100);
  --color-surface-inverse: var(--os-navy-900);

  --color-text: var(--os-navy-900);
  --color-text-muted: var(--os-navy-600);
  --color-text-subtle: var(--os-navy-500);
  --color-text-inverse: var(--os-gray-100);
  --color-text-on-accent: #ffffff;
  --color-footer-text: var(--os-navy-400);

  --color-border: var(--os-gray-200);
  --color-border-strong: var(--os-navy-300);
  --color-divider: var(--os-gray-200);

  --color-accent: var(--os-coral-500);
  --color-accent-hover: var(--os-coral-600);
  --color-accent-active: var(--os-coral-700);
  --color-accent-soft: var(--os-coral-100);
  --color-accent-border: var(--os-coral-200);

  --color-support: var(--os-teal-500);
  --color-support-soft: var(--os-teal-100);
  --color-support-border: var(--os-teal-200);

  --color-star: var(--os-star-500);
  --color-star-empty: var(--os-navy-300);

  --color-focus: var(--os-coral-500);
  --color-selection: var(--os-coral-100);
  --color-scrim: rgba(26, 31, 54, 0.45);

  /* Generated cover art. Flat blocks in the brand placeholder palette with
     a same-hue tint for the type, per the design system's typographic
     covers; a book's id picks one so the same book always renders the same
     spine. */
  --cover-1-from: #1A1F36; --cover-1-to: #1A1F36; --cover-1-ink: #DCCFBF;
  --cover-2-from: #2D7D7A; --cover-2-to: #2D7D7A; --cover-2-ink: #DDEDEC;
  --cover-3-from: #6B4FA3; --cover-3-to: #6B4FA3; --cover-3-ink: #EAE4F5;
  --cover-4-from: #33608F; --cover-4-to: #33608F; --cover-4-ink: #DCE8F5;
  --cover-5-from: #8A6D3B; --cover-5-to: #8A6D3B; --cover-5-ink: #F0E7D8;
  --cover-6-from: #FF6A4D; --cover-6-to: #FF6A4D; --cover-6-ink: #FBF5EE;
  --cover-ink: #FBF5EE;
}