/* ==========================================================================
   macOS Tahoe (26) — Design Tokens
   Derived from frame-by-frame analysis of macos.mp4 (Liquid Glass era).
   All measurements are in CSS px at 1x (1pt = 1px).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Typography ---------- */
  --font-sans: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
               "Inter", "Segoe UI Variable Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-rounded: "SF Pro Rounded", "SF Compact Rounded", "Nunito", var(--font-sans);
  --font-mono: "SF Mono", ui-monospace, Menlo, "Cascadia Code", Consolas, monospace;

  /* macOS text styles (size / line-height) */
  --fs-large-title: 26px;  --lh-large-title: 32px;
  --fs-title1: 22px;       --lh-title1: 26px;
  --fs-title2: 17px;       --lh-title2: 22px;
  --fs-title3: 15px;       --lh-title3: 20px;
  --fs-headline: 13px;     --lh-headline: 16px;
  --fs-body: 13px;         --lh-body: 16px;
  --fs-callout: 12px;      --lh-callout: 15px;
  --fs-subhead: 11px;      --lh-subhead: 14px;
  --fs-footnote: 10px;     --lh-footnote: 13px;
  --fs-caption: 10px;      --lh-caption: 13px;
  /* Tahoe app "hero" titles (Reminders list title, Phone contact name) */
  --fs-hero: 32px;         --lh-hero: 38px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --tracking-tight: -0.01em; --tracking-caps: 0.06em;

  /* ---------- Spacing (4pt grid) ---------- */
  --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;     /* checkbox, small chips        */
  --r-sm: 6px;     /* push buttons, fields, popups */
  --r-md: 8px;     /* list/sidebar selection       */
  --r-lg: 12px;    /* cards, menus                 */
  --r-xl: 16px;    /* popovers, action cards       */
  --r-2xl: 20px;   /* windows, sheets, widgets     */
  --r-3xl: 26px;   /* dock                         */
  --r-4xl: 28px;   /* control center, HUD panels   */
  --r-pill: 999px;

  --window-radius: 20px;
  --sheet-radius: 20px;
  --alert-radius: 20px;
  --menu-radius: 12px;
  --popover-radius: 14px;
  --card-radius: 12px;
  --widget-radius: 20px;
  --dock-radius: 26px;
  --cc-radius: 28px;
  --cc-tile-radius: 26px;
  --control-radius: 6px;
  --field-radius: 6px;
  --appicon-radius: 22.37%;   /* Apple squircle ≈ 22.37% of side */

  /* ---------- Sizes ---------- */
  --menubar-h: 24px;
  --menubar-h-notch: 37px;
  --titlebar-h: 28px;         /* compact title bar */
  --toolbar-h: 52px;          /* unified toolbar (Tahoe) */
  --toolbar-h-compact: 38px;
  --statusbar-h: 22px;
  --sidebar-w: 220px;
  --inspector-w: 260px;
  --control-h: 22px;          /* regular control size */
  --control-h-large: 28px;    /* large / capsule buttons */
  --control-h-mini: 16px;
  --control-h-small: 19px;
  --toolbar-btn: 32px;        /* glass toolbar button */
  --search-h: 30px;           /* capsule search field in toolbars */
  --sidebar-row-h: 28px;      /* Finder */
  --settings-row-h: 32px;     /* System Settings sidebar */
  --menu-row-h: 28px;         /* Tahoe menus (taller than Sequoia's 22px) */
  --list-row-h: 24px;
  --traffic-light: 12px;
  --traffic-gap: 8px;
  --dock-icon: 52px;
  --dock-h: 68px;
  --dock-gap: 6px;
  --widget-s: 170px;
  --widget-m: 360px;
  --widget-l: 376px;
  --cc-w: 340px;
  --cc-unit: 72px;            /* small circle tile */
  --cc-gap: 10px;
  --spotlight-w: 680px;
  --spotlight-pill-h: 56px;

  /* ---------- Motion ---------- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.22, 1.2, .36, 1);

  /* ---------- System colors (light) ---------- */
  --sys-blue:   #007AFF;
  --sys-red:    #FF3B30;
  --sys-orange: #FF9500;
  --sys-yellow: #FFCC00;
  --sys-green:  #28CD41;
  --sys-mint:   #00C7BE;
  --sys-teal:   #59ADC4;
  --sys-cyan:   #55BEF0;
  --sys-indigo: #5856D6;
  --sys-purple: #AF52DE;
  --sys-pink:   #FF2D55;
  --sys-brown:  #A2845E;
  --sys-gray:   #8E8E93;
  --sys-gray2:  #AEAEB2;
  --sys-gray3:  #C7C7CC;
  --sys-gray4:  #D1D1D6;
  --sys-gray5:  #E5E5EA;
  --sys-gray6:  #F2F2F7;

  /* Appearance > Accent color presets (NSColor.controlAccentColor) */
  --accent-blue:     #007AFF;
  --accent-purple:   #A550A7;
  --accent-pink:     #F74F9E;
  --accent-red:      #FF5257;
  --accent-orange:   #F7821B;
  --accent-yellow:   #FFC600;
  --accent-green:    #62BA46;
  --accent-graphite: #8C8C8C;

  --accent: var(--accent-blue);
  --accent-text: #FFFFFF;
  --accent-hover: color-mix(in srgb, var(--accent) 90%, #000);
  --accent-pressed: color-mix(in srgb, var(--accent) 80%, #000);
  --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-tint-strong: color-mix(in srgb, var(--accent) 22%, transparent);
  --selection: color-mix(in srgb, var(--accent) 28%, transparent);   /* text highlight */
  --focus-ring: color-mix(in srgb, var(--accent) 45%, transparent);
  --focus-ring-w: 3.5px;
  --link: var(--sys-blue);

  /* ---------- Label colors ---------- */
  --label:   rgba(0, 0, 0, .85);
  --label-2: rgba(0, 0, 0, .50);
  --label-3: rgba(0, 0, 0, .25);
  --label-4: rgba(0, 0, 0, .10);
  --label-inverse: #FFFFFF;
  --placeholder: rgba(0, 0, 0, .28);

  /* ---------- Fill colors ---------- */
  --fill:   rgba(0, 0, 0, .10);
  --fill-2: rgba(0, 0, 0, .08);
  --fill-3: rgba(0, 0, 0, .05);
  --fill-4: rgba(0, 0, 0, .03);
  --fill-hover: rgba(0, 0, 0, .06);
  --fill-pressed: rgba(0, 0, 0, .12);

  /* ---------- Backgrounds ---------- */
  --bg-desktop: #2B6FD6;
  --bg-window: #ECECEC;         /* windowBackgroundColor */
  --bg-content: #FFFFFF;        /* textBackgroundColor / content views */
  --bg-grouped: #F5F5F7;        /* System Settings detail background */
  --bg-card: #FFFFFF;           /* grouped rows card */
  --bg-card-2: #F7F7F9;
  --bg-control: #FFFFFF;        /* push button face */
  --bg-control-2: #F0F0F2;      /* popup / secondary button */
  --bg-field: #FFFFFF;
  --bg-under-page: #E6E6E6;
  --bg-sidebar: rgba(255, 255, 255, .42);
  --bg-hud: rgba(30, 30, 32, .92);
  --bg-elevated: #FFFFFF;

  /* ---------- Strokes ---------- */
  --separator: rgba(0, 0, 0, .10);
  --separator-strong: rgba(0, 0, 0, .16);
  --separator-opaque: #DADADE;
  --border-control: rgba(0, 0, 0, .12);
  --border-field: rgba(0, 0, 0, .14);
  --border-window: rgba(0, 0, 0, .18);
  --border-window-inner: rgba(255, 255, 255, .55);

  /* ---------- Shadows ---------- */
  --shadow-1: 0 .5px 1.5px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.06);
  --shadow-2: 0 2px 8px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.06);
  --shadow-3: 0 8px 24px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08);
  --shadow-4: 0 18px 50px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.10);
  --shadow-window: 0 26px 70px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.14), 0 0 0 .5px var(--border-window);
  --shadow-window-inactive: 0 10px 28px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.14);
  --shadow-menu: 0 12px 34px rgba(0,0,0,.20), 0 2px 6px rgba(0,0,0,.08);
  --shadow-popover: 0 14px 40px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.10);
  --shadow-sheet: 0 30px 80px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.12);
  --shadow-glass: 0 10px 30px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.08);
  --shadow-glass-sm: 0 3px 10px rgba(0,0,0,.12), 0 .5px 1.5px rgba(0,0,0,.08);
  --shadow-dock: 0 14px 34px rgba(0,0,0,.26), 0 2px 6px rgba(0,0,0,.12);
  --shadow-icon: 0 3px 8px rgba(0,0,0,.24), 0 .5px 1px rgba(0,0,0,.2);
  --shadow-control: 0 .5px 1.5px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.05);
  --shadow-knob: 0 1px 3px rgba(0,0,0,.28), 0 0 0 .5px rgba(0,0,0,.06);
  --text-shadow-desktop: 0 1px 2px rgba(0,0,0,.45), 0 0 8px rgba(0,0,0,.25);

  /* ---------- Liquid Glass materials ---------- */
  --glass-blur: 28px;
  --glass-saturate: 1.7;
  --glass-bg:        rgba(255, 255, 255, .55);   /* regular */
  --glass-bg-strong: rgba(255, 255, 255, .74);   /* prominent (menus, popovers) */
  --glass-bg-clear:  rgba(255, 255, 255, .22);   /* clear (menu-bar pills, Spotlight buttons) */
  --glass-bg-thin:   rgba(255, 255, 255, .38);
  --glass-rim:       rgba(255, 255, 255, .70);   /* 1px inside edge */
  --glass-rim-dark:  rgba(0, 0, 0, .08);
  --glass-specular:  rgba(255, 255, 255, .95);   /* top highlight */
  --glass-sheen:     linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.18) 100%);
  --glass-text: var(--label);
  --glass-text-2: var(--label-2);
  --glass-dark-bg: rgba(28, 28, 32, .62);
  --glass-dark-rim: rgba(255, 255, 255, .16);
  --glass-dark-specular: rgba(255, 255, 255, .30);

  /* ---------- Traffic lights ---------- */
  --tl-red: #FF5F57;    --tl-red-stroke: #E0443E;    --tl-red-glyph: #4D0000;
  --tl-yellow: #FEBC2E; --tl-yellow-stroke: #D89E24; --tl-yellow-glyph: #995700;
  --tl-green: #28C840;  --tl-green-stroke: #1AAB29;  --tl-green-glyph: #006500;
  --tl-inactive: #D9D9DD; --tl-inactive-stroke: #C4C4C8;

  /* ---------- Widgets / Notifications ---------- */
  --widget-bg: rgba(255, 255, 255, .72);
  --widget-text: var(--label);
  --notif-bg: var(--glass-bg-strong);

  /* ---------- Menu bar ---------- */
  --menubar-text: #FFFFFF;
  --menubar-text-shadow: 0 1px 2px rgba(0,0,0,.35);
  --menubar-bg: transparent;
  --menubar-bg-opaque: rgba(255,255,255,.45);
  --menubar-hl: rgba(255,255,255,.28);

  /* ---------- Dock ---------- */
  --dock-bg: rgba(255, 255, 255, .34);
  --dock-rim: rgba(255, 255, 255, .55);
  --dock-indicator: rgba(0, 0, 0, .55);

  /* ---------- App-specific tints (from the video) ---------- */
  --tint-reminders-today: #3A82F7;
  --tint-reminders-scheduled: #EB4D3D;
  --tint-reminders-all: #45464A;
  --tint-reminders-flagged: #F0904A;
  --tint-reminders-completed: #6C6E73;
  --tint-notes: #F0B429;           /* Notes yellow accent */
  --tint-journal: #8E6CF0;
  --tint-imessage: #1E90FF;
  --tint-imessage-2: #0A7CFF;
  --tint-sms: #34C759;
  --tint-received: #E9E9EB;
  --tint-received-dark: rgba(255,255,255,.14);
}

/* ==========================================================================
   Dark appearance
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --sys-blue:   #0A84FF;
  --sys-red:    #FF453A;
  --sys-orange: #FF9F0A;
  --sys-yellow: #FFD60A;
  --sys-green:  #32D74B;
  --sys-mint:   #66D4CF;
  --sys-teal:   #6AC4DC;
  --sys-cyan:   #5AC8F5;
  --sys-indigo: #5E5CE6;
  --sys-purple: #BF5AF2;
  --sys-pink:   #FF375F;
  --sys-brown:  #AC8E68;
  --sys-gray:   #98989D;
  --sys-gray2:  #636366;
  --sys-gray3:  #48484A;
  --sys-gray4:  #3A3A3C;
  --sys-gray5:  #2C2C2E;
  --sys-gray6:  #1C1C1E;

  --accent-blue: #0A84FF;
  --accent-hover: color-mix(in srgb, var(--accent) 88%, #fff);
  --accent-pressed: color-mix(in srgb, var(--accent) 78%, #fff);
  --link: var(--sys-blue);

  --label:   rgba(255, 255, 255, .85);
  --label-2: rgba(255, 255, 255, .55);
  --label-3: rgba(255, 255, 255, .25);
  --label-4: rgba(255, 255, 255, .10);
  --label-inverse: #000000;
  --placeholder: rgba(255, 255, 255, .30);

  --fill:   rgba(255, 255, 255, .10);
  --fill-2: rgba(255, 255, 255, .08);
  --fill-3: rgba(255, 255, 255, .05);
  --fill-4: rgba(255, 255, 255, .03);
  --fill-hover: rgba(255, 255, 255, .07);
  --fill-pressed: rgba(255, 255, 255, .14);

  --bg-desktop: #101B33;
  --bg-window: #1E1E20;
  --bg-content: #1C1C1E;
  --bg-grouped: #1C1C1E;
  --bg-card: #262628;
  --bg-card-2: #2C2C2E;
  --bg-control: rgba(255, 255, 255, .12);
  --bg-control-2: rgba(255, 255, 255, .09);
  --bg-field: rgba(255, 255, 255, .06);
  --bg-under-page: #141414;
  --bg-sidebar: rgba(30, 30, 34, .40);
  --bg-hud: rgba(22, 22, 24, .94);
  --bg-elevated: #2A2A2C;

  --separator: rgba(255, 255, 255, .12);
  --separator-strong: rgba(255, 255, 255, .18);
  --separator-opaque: #3A3A3C;
  --border-control: rgba(255, 255, 255, .14);
  --border-field: rgba(255, 255, 255, .16);
  --border-window: rgba(0, 0, 0, .65);
  --border-window-inner: rgba(255, 255, 255, .14);

  --shadow-window: 0 26px 70px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.30), 0 0 0 .5px var(--border-window), inset 0 0 0 .5px var(--border-window-inner);
  --shadow-window-inactive: 0 10px 28px rgba(0,0,0,.40), 0 0 0 .5px var(--border-window), inset 0 0 0 .5px var(--border-window-inner);
  --shadow-menu: 0 12px 34px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);
  --shadow-popover: 0 14px 40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.25);
  --shadow-sheet: 0 30px 80px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.3);

  --glass-bg:        rgba(44, 44, 48, .58);
  --glass-bg-strong: rgba(40, 40, 44, .78);
  --glass-bg-clear:  rgba(60, 60, 66, .30);
  --glass-bg-thin:   rgba(50, 50, 54, .42);
  --glass-rim:       rgba(255, 255, 255, .16);
  --glass-rim-dark:  rgba(0, 0, 0, .35);
  --glass-specular:  rgba(255, 255, 255, .28);
  --glass-sheen:     linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.06) 100%);

  --tl-inactive: #4B4B4F; --tl-inactive-stroke: #3A3A3E;

  --widget-bg: rgba(38, 38, 42, .72);
  --menubar-bg-opaque: rgba(30,30,34,.55);
  --menubar-hl: rgba(255,255,255,.16);
  --dock-bg: rgba(40, 40, 46, .42);
  --dock-rim: rgba(255, 255, 255, .18);
  --dock-indicator: rgba(255, 255, 255, .75);
  --tint-received: #3B3B3D;
}

/* ==========================================================================
   Accent color presets  (System Settings > Appearance > Color)
   ========================================================================== */
:root[data-accent="blue"]     { --accent: var(--accent-blue); }
:root[data-accent="purple"]   { --accent: var(--accent-purple); }
:root[data-accent="pink"]     { --accent: var(--accent-pink); }
:root[data-accent="red"]      { --accent: var(--accent-red); }
:root[data-accent="orange"]   { --accent: var(--accent-orange); }
:root[data-accent="yellow"]   { --accent: var(--accent-yellow); --accent-text: #1a1a1a; }
:root[data-accent="green"]    { --accent: var(--accent-green); }
:root[data-accent="graphite"] { --accent: var(--accent-graphite); }
:root[data-accent="multicolor"] { --accent: var(--accent-blue); }

/* ==========================================================================
   Icon & widget style  (Default / Dark / Clear / Tinted)
   ========================================================================== */
:root[data-icon-style="dark"] {
  --widget-bg: rgba(30, 30, 34, .70);
  --widget-text: rgba(255,255,255,.9);
  --dock-bg: rgba(30, 30, 34, .48);
  --dock-rim: rgba(255,255,255,.14);
  --dock-indicator: rgba(255,255,255,.8);
}
:root[data-icon-style="clear"] {
  --widget-bg: rgba(255, 255, 255, .18);
  --widget-text: #FFFFFF;
  --dock-bg: rgba(255, 255, 255, .16);
}
:root[data-icon-style="tinted"] {
  --widget-bg: color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.18));
  --widget-text: #FFFFFF;
  --dock-bg: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.22));
}

/* Reduced transparency (Accessibility) */
:root[data-reduce-transparency="true"] {
  --glass-blur: 0px;
  --glass-bg: var(--bg-window);
  --glass-bg-strong: var(--bg-window);
  --glass-bg-clear: var(--bg-window);
  --glass-bg-thin: var(--bg-window);
  --bg-sidebar: var(--bg-window);
  --dock-bg: var(--bg-window);
  --widget-bg: var(--bg-window);
}