/*
  Design tokens for Dashboard Familiar.
  Semantic names follow UIKit / Apple HIG (label, system backgrounds, system tints).
  Light values live on :root; dark values override them under prefers-color-scheme.
  See DESIGN.md for the scale and when to use each token.
*/

:root {
  color-scheme: light;

  /*
    Type. system-ui resolves to SF Pro on Apple platforms.
    The preferred value is vw + vh so the iPad Pro 11" landscape
    (1194×834) is the reading size, 1024×768 stays near the floor,
    and 1366×1024 grows until the cap. See DESIGN.md.
  */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;

  --text-clock: clamp(56px, 4.2vw + 2.4vh, 96px);
  --text-date: clamp(18px, 1.35vw + 1.15vh, 34px);
  --text-greeting: clamp(16px, 0.78vw + 1.05vh, 24px);
  --text-hero: clamp(40px, 3.2vw + 2.4vh, 80px);
  --text-title: clamp(20px, 1.4vw + 1.3vh, 36px);
  /*
    Reading text (tasks, events, shopping, forecast, titles, Tesla
    status) is at least 18px on the iPad Pro 11" in both orientations.
    The floor still scales; phones sit on the clamp minimum.
  */
  --text-body: clamp(16px, 1.05vw + 0.95vh, 28px);
  --text-callout: clamp(16px, 1vw + 0.92vh, 26px);
  --text-subhead: clamp(15px, 0.96vw + 0.88vh, 24px);
  --text-caption: clamp(14px, 0.94vw + 0.86vh, 22px);
  --text-footnote: clamp(14px, 0.93vw + 0.86vh, 22px);

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

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --tracking-clock: -0.045em;
  --tracking-title: -0.02em;

  /* Spacing, 4px base. */
  --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;

  /* Corners. Widget radius tracks the tile, within the iOS range. */
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;
  --radius-widget: clamp(22px, 1.5vw + 0.7vh, 32px);
  --radius-xl: 32px;
  --radius-pill: 999px;

  /*
    Page inset is added to the device safe area (home indicator,
    status bar, rounded corners). env() is 0 in a normal browser tab.
  */
  --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);
  --inset-x: clamp(16px, 1.5vw, 28px);
  --inset-y: clamp(12px, 1.2vh, 20px);
  --gap-bento: clamp(12px, 0.8vw + 0.45vh, 18px);

  /* Materials. The whole value is a backdrop-filter function list. */
  --material-thin: blur(16px) saturate(160%);
  --material-regular: blur(32px) saturate(180%);
  --material-thick: blur(48px) saturate(200%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.12);

  /* Labels. */
  --label: #000000;
  --secondary-label: rgba(60, 60, 67, 0.6);
  --tertiary-label: rgba(60, 60, 67, 0.3);
  --quaternary-label: rgba(60, 60, 67, 0.18);

  /* Backgrounds. */
  --system-background: #ffffff;
  --secondary-system-background: #f2f2f7;
  --tertiary-system-background: #ffffff;
  --system-grouped-background: #f2f2f7;
  --secondary-system-grouped-background: #ffffff;
  --tertiary-system-grouped-background: #f2f2f7;

  --separator: rgba(60, 60, 67, 0.29);
  --opaque-separator: #c6c6c8;
  --system-fill: rgba(120, 120, 128, 0.2);
  --secondary-system-fill: rgba(120, 120, 128, 0.16);
  --tertiary-system-fill: rgba(118, 118, 128, 0.12);

  /* Tints, light appearance. */
  --system-blue: #007aff;
  --system-brown: #a2845e;
  --system-cyan: #32ade6;
  --system-green: #34c759;
  --system-indigo: #5856d6;
  --system-mint: #00c7be;
  --system-orange: #ff9500;
  --system-orange-text: #9a3d00;
  --system-pink: #ff2d55;
  --system-purple: #af52de;
  --system-red: #ff3b30;
  --system-teal: #30b0c7;
  --system-yellow: #ffcc00;
  --system-gray: #8e8e93;

  /* Widget material and the canvas behind it. */
  --widget-fill: rgba(255, 255, 255, 0.78);
  --widget-fill-solid: rgba(255, 255, 255, 0.97);
  --widget-stroke: rgba(255, 255, 255, 0.72);
  --widget-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --widget-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --wallpaper: #e4e4ec;
  --orb-blue: rgba(0, 122, 255, 0.34);
  --orb-orange: rgba(255, 149, 0, 0.3);
  --orb-pink: rgba(255, 45, 85, 0.18);
  --orb-purple: rgba(88, 86, 214, 0.16);
  --toast-fill: rgba(255, 255, 255, 0.9);
  --on-tint: #ffffff;
  --theme-color: #e4e4ec;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --label: #ffffff;
    --secondary-label: rgba(235, 235, 245, 0.6);
    --tertiary-label: rgba(235, 235, 245, 0.3);
    --quaternary-label: rgba(235, 235, 245, 0.16);

    --system-background: #000000;
    --secondary-system-background: #1c1c1e;
    --tertiary-system-background: #2c2c2e;
    --system-grouped-background: #000000;
    --secondary-system-grouped-background: #1c1c1e;
    --tertiary-system-grouped-background: #2c2c2e;

    --separator: rgba(84, 84, 88, 0.65);
    --opaque-separator: #38383a;
    --system-fill: rgba(120, 120, 128, 0.36);
    --secondary-system-fill: rgba(120, 120, 128, 0.32);
    --tertiary-system-fill: rgba(118, 118, 128, 0.24);

    --system-blue: #0a84ff;
    --system-brown: #ac8e68;
    --system-cyan: #64d2ff;
    --system-green: #30d158;
    --system-indigo: #5e5ce6;
    --system-mint: #63e6e2;
    --system-orange: #ff9f0a;
    --system-orange-text: #ffb340;
    --system-pink: #ff375f;
    --system-purple: #bf5af2;
    --system-red: #ff453a;
    --system-teal: #40c8e0;
    --system-yellow: #ffd60a;
    --system-gray: #8e8e93;

    --widget-fill: rgba(28, 28, 30, 0.72);
    --widget-fill-solid: #1c1c1e;
    --widget-stroke: rgba(255, 255, 255, 0.14);
    --widget-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    --widget-highlight: inset 0 0.5px 0 rgba(255, 255, 255, 0.18);
    --wallpaper: #000000;
    --orb-blue: rgba(10, 132, 255, 0.42);
    --orb-orange: rgba(255, 159, 10, 0.24);
    --orb-pink: rgba(255, 55, 95, 0.2);
    --orb-purple: rgba(191, 90, 242, 0.22);
    --toast-fill: rgba(44, 44, 46, 0.92);
    --theme-color: #000000;
  }
}