/* ==================================================================
   Wyndham — Design tokens
   ------------------------------------------------------------------
   Swiss typographic discipline, iOS materials and motion.

   A warm paper ground rather than clinical white, one accent used
   sparingly, a strict type scale, and a 4px spacing rhythm. Both
   colour schemes are defined here and selected by the user's system
   preference, with an explicit override available via data-theme.
   ================================================================== */

:root {
    color-scheme: light dark;

    /* --- Palette: light ------------------------------------------- */
    --bg:            #FBFAF8;   /* warm paper, the app canvas          */
    --surface:       #FFFFFF;   /* raised cards and the content pane   */
    --surface-2:     #F4F2EE;   /* recessed wells, inputs, hover       */
    --surface-3:     #EDEAE4;   /* pressed states                      */

    --text:          #1A1917;   /* primary                             */
    --text-2:        #6B6862;   /* secondary, captions                 */
    --text-3:        #9C978E;   /* tertiary, placeholders              */

    --line:          #E7E3DC;   /* hairlines and borders               */
    --line-strong:   #D8D3C9;

    --accent:        #DE6516;   /* the single accent: orange           */
    --accent-hover:  #C5570F;
    --accent-press:  #AC4B0B;
    --accent-soft:   #FDF1E8;   /* tinted background for active states */
    --accent-line:   #F6D6BE;
    --on-accent:     #FFFFFF;

    --positive:      #2F7D4F;
    --positive-soft: #E9F4EC;
    --warning:       #9A6B10;
    --warning-soft:  #FBF2DE;
    --danger:        #B4342A;
    --danger-hover:  #98261D;
    --danger-soft:   #FBEBE9;

    /* Translucent materials — the mobile nav pill and reader chrome. */
    --material:      rgba(251, 250, 248, 0.78);
    --material-line: rgba(0, 0, 0, 0.07);
    --scrim:         rgba(26, 25, 23, 0.32);

    /* Star rating and highlight colours. */
    --star:          #E8A33D;
    --hl-yellow:     #FBEA9E;
    --hl-green:      #C4EBC4;
    --hl-blue:       #C3DFF7;
    --hl-pink:       #F9CEDD;
    --hl-purple:     #DED2F5;
    --hl-orange:     #FBD7B2;

    /* --- Typography ------------------------------------------------
       The interface uses the platform UI face so it feels native on
       every device and costs nothing to download. Reading faces are
       system serif/sans stacks for the same reason — an offline-first
       reader should never wait on a webfont.                        */
    --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Palladio,
                  "Book Antiqua", Georgia, "Times New Roman", serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    /* High-legibility stack for readers who need one. OpenDyslexic is
       used when the reader has installed it; otherwise a wide, open
       sans with loosened spacing, applied in reader.css.            */
    --font-readable: "OpenDyslexic", "Comic Sans MS", Verdana, Tahoma, sans-serif;

    /* Type scale — 1.22 ratio, rounded to whole pixels.             */
    --size-2xs:  11px;
    --size-xs:   12px;
    --size-sm:   13px;
    --size-base: 15px;
    --size-md:   17px;
    --size-lg:   20px;
    --size-xl:   25px;
    --size-2xl:  31px;
    --size-3xl:  38px;

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

    --leading-tight:  1.15;
    --leading-snug:   1.3;
    --leading-normal: 1.5;
    --leading-loose:  1.65;

    /* Optical tightening: large type needs negative tracking to look
       right, small type needs a touch of positive.                  */
    --tracking-tight:  -0.022em;
    --tracking-snug:   -0.012em;
    --tracking-normal:  0;
    --tracking-wide:    0.02em;
    --tracking-caps:    0.06em;

    /* --- Spacing: 4px rhythm --------------------------------------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  40px;
    --space-9:  48px;
    --space-10: 64px;

    /* --- Radii ------------------------------------------------------ */
    --radius-xs:   6px;
    --radius-sm:   9px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   22px;
    --radius-2xl:  28px;
    --radius-full: 999px;

    /* --- Elevation --------------------------------------------------
       Restrained: a hairline plus a soft, low shadow. Heavy drop
       shadows read as "website", not "app".                         */
    --shadow-sm: 0 1px 2px rgba(26, 25, 23, 0.05);
    --shadow-md: 0 2px 8px rgba(26, 25, 23, 0.07), 0 1px 2px rgba(26, 25, 23, 0.05);
    --shadow-lg: 0 8px 28px rgba(26, 25, 23, 0.11), 0 2px 6px rgba(26, 25, 23, 0.06);
    --shadow-nav: 0 6px 24px rgba(26, 25, 23, 0.13), 0 1px 3px rgba(26, 25, 23, 0.08);
    --shadow-cover: 0 1px 2px rgba(26, 25, 23, 0.10), 0 6px 16px rgba(26, 25, 23, 0.10);

    /* --- Motion -----------------------------------------------------
       150–250ms with an iOS-like ease. Anything slower feels sluggish
       on a phone; anything faster reads as a jump cut.              */
    --ease:        cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:   150ms;
    --duration-base:   200ms;
    --duration-slow:   250ms;
    --transition:      all var(--duration-base) var(--ease);

    /* --- Layout ------------------------------------------------------ */
    --sidebar-width:   258px;
    --content-max:     1180px;
    --reader-max:      70ch;
    --tabbar-height:   58px;

    /* Safe areas, so nothing hides behind a notch or home indicator. */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);

    /* Clearance for the iPadOS 26 window controls. Applied only when
       js/app.js has confirmed we are windowed on an iPad — see
       layout.css and the ipad-windowed class on <html>.             */
    --ipad-controls-height: 44px;
    --ipad-controls-width:  92px;
}

/* ==================================================================
   Dark scheme
   Not an inversion: the ground stays warm, the accent brightens
   slightly to hold its chroma against a dark field, and shadows give
   way to lighter surfaces because shadows do not read in the dark.
   ================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #100F0E;
        --surface:       #1A1918;
        --surface-2:     #232220;
        --surface-3:     #2C2B28;

        --text:          #F3F1ED;
        --text-2:        #A8A49C;
        --text-3:        #77736C;

        --line:          #2B2A27;
        --line-strong:   #3A3835;

        --accent:        #F07A2E;
        --accent-hover:  #F79045;
        --accent-press:  #D9691F;
        --accent-soft:   #2A1C12;
        --accent-line:   #4A2E19;
        --on-accent:     #17110C;

        --positive:      #5CB77F;
        --positive-soft: #13251A;
        --warning:       #D6A44A;
        --warning-soft:  #2A2114;
        --danger:        #E8695C;
        --danger-hover:  #F0857A;
        --danger-soft:   #2B1614;

        --material:      rgba(16, 15, 14, 0.76);
        --material-line: rgba(255, 255, 255, 0.09);
        --scrim:         rgba(0, 0, 0, 0.55);

        --star:          #E8A33D;
        --hl-yellow:     #5C5222;
        --hl-green:      #2C4A32;
        --hl-blue:       #24405C;
        --hl-pink:       #56283B;
        --hl-purple:     #3B2F5C;
        --hl-orange:     #5A3A1C;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.55);
        --shadow-nav: 0 6px 26px rgba(0, 0, 0, 0.6);
        --shadow-cover: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.45);
    }
}

/* Explicit override, set by the theme control in Settings. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg:            #100F0E;
    --surface:       #1A1918;
    --surface-2:     #232220;
    --surface-3:     #2C2B28;

    --text:          #F3F1ED;
    --text-2:        #A8A49C;
    --text-3:        #77736C;

    --line:          #2B2A27;
    --line-strong:   #3A3835;

    --accent:        #F07A2E;
    --accent-hover:  #F79045;
    --accent-press:  #D9691F;
    --accent-soft:   #2A1C12;
    --accent-line:   #4A2E19;
    --on-accent:     #17110C;

    --positive:      #5CB77F;
    --positive-soft: #13251A;
    --warning:       #D6A44A;
    --warning-soft:  #2A2114;
    --danger:        #E8695C;
    --danger-hover:  #F0857A;
    --danger-soft:   #2B1614;

    --material:      rgba(16, 15, 14, 0.76);
    --material-line: rgba(255, 255, 255, 0.09);
    --scrim:         rgba(0, 0, 0, 0.55);

    --hl-yellow:     #5C5222;
    --hl-green:      #2C4A32;
    --hl-blue:       #24405C;
    --hl-pink:       #56283B;
    --hl-purple:     #3B2F5C;
    --hl-orange:     #5A3A1C;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.55);
    --shadow-nav: 0 6px 26px rgba(0, 0, 0, 0.6);
    --shadow-cover: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.45);
}

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

/* Honour a request for reduced motion: keep state changes legible,
   drop the movement. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 1ms;
        --duration-base: 1ms;
        --duration-slow: 1ms;
    }

    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}