@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ===========================================================================
   Unfold — design tokens
   The same values as the hz design spec, whose look the shell shares:
   colour, type, spacing, radius, glass, depth and motion.

   Theme is set with [data-theme="light"] or [data-theme="dark"] on an
   element. Without the attribute the page follows the system.
   =========================================================================== */

:root {
  /* --- Type --------------------------------------------------------------
     The native app uses SF Pro. On machines without it Inter stands in —
     same metrics family, close enough to judge a layout by.                 */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* The iOS Dynamic Type scale at the default ("Large") size. */
  --t-large-title: 34px; --t-large-title-lh: 41px; --t-large-title-ls: 0.4px;
  --t-title1:      28px; --t-title1-lh: 34px;
  --t-title2:      22px; --t-title2-lh: 28px;
  --t-title3:      20px; --t-title3-lh: 25px;
  --t-headline:    17px; --t-headline-lh: 22px;
  --t-body:        17px; --t-body-lh: 22px;
  --t-callout:     16px; --t-callout-lh: 21px;
  --t-subhead:     15px; --t-subhead-lh: 20px;
  --t-footnote:    13px; --t-footnote-lh: 18px;
  --t-caption1:    12px; --t-caption1-lh: 16px;
  --t-caption2:    11px; --t-caption2-lh: 13px;

  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;

  /* --- Spacing ------------------------------------------------------------
     4 px base. --gutter is the iOS layout margin; everything lines up on it. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;
  --gutter: 16px;
  --tap-min: 44px;

  /* --- Radius ------------------------------------------------------------- */
  --r-phone: 55px;
  --r-sheet: 38px;   /* iOS 26 sheets follow the display corner */
  --r-card:  26px;   /* inset grouped lists */
  --r-bubble: 20px;
  --r-md:    16px;
  --r-sm:    12px;
  --r-xs:    8px;
  --r-pill:  999px;

  --hairline: 0.5px;

  /* --- Motion --------------------------------------------------------------
     Springs, not durations: every curve here is the closest cubic to a
     UIKit spring. --spring overshoots, --ease settles without it.          */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --spring:     cubic-bezier(0.34, 1.45, 0.64, 1);
  --spring-soft: cubic-bezier(0.3, 1.25, 0.5, 1);
  --dur-fast: 160ms;
  --dur:      320ms;
  --dur-push: 480ms;
  --dur-slow: 560ms;

  /* --- Layers -------------------------------------------------------------- */
  --z-content: 0;
  --z-bar: 10;
  --z-sheet: 20;
  --z-overlay: 30;
  --z-toast: 40;

  /* --- Frame (mockup chrome, not part of the app) -------------------------- */
  --phone-w: 393px;
  --phone-h: 852px;
  --status-h: 54px;
  --home-h: 34px;
}

/* ===========================================================================
   LIGHT — the base values
   =========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Grounds, bottom up. The app ground is iOS systemGroupedBackground. */
  --bg:          #F2F2F7;
  --bg-plain:    #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #E9E9EF;   /* fields, tracks */
  --surface-3:   #DCDCE3;

  --text:   #0A0A0F;
  --text-2: rgba(60, 60, 67, 0.62);
  --text-3: rgba(60, 60, 67, 0.34);

  --line:        rgba(60, 60, 67, 0.16);
  --line-strong: rgba(60, 60, 67, 0.29);

  /* Accent. hz mint, the same hue the PWA uses; darker as ink on light. */
  --accent:      #2BC381;
  --on-accent:   #FFFFFF;
  --accent-ink:  #0E9A5E;
  --accent-soft: rgba(43, 195, 129, 0.14);

  --danger:      #FF3B30;
  --danger-soft: rgba(255, 59, 48, 0.12);
  --warn:        #FF9500;
  --info:        #007AFF;
  --online:      #34C759;

  /* Liquid glass. Three thicknesses: bars, controls and sheets. */
  --glass:        rgba(255, 255, 255, 0.68);
  --glass-thick:  rgba(250, 250, 252, 0.82);
  --glass-thin:   rgba(255, 255, 255, 0.36);
  --glass-tint:   rgba(43, 195, 129, 0.78);
  --glass-edge:   rgba(255, 255, 255, 0.9);
  --glass-rim:    rgba(0, 0, 0, 0.06);
  --glass-blur:   blur(22px) saturate(190%);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --glass-shine:  inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35);

  /* Chat */
  --bubble-in:      rgba(255, 255, 255, 0.92);
  --bubble-in-text: #0A0A0F;
  --bubble-out:     linear-gradient(180deg, #3DD28E 0%, #22B774 100%);
  --bubble-out-text:#FFFFFF;
  --bubble-out-2:   rgba(255, 255, 255, 0.78); /* meta on the out bubble */
  --bubble-out-tail:#22B774; /* the gradient's foot, for the tail */
  --bubble-code:    rgba(0, 0, 0, 0.055);
  --bubble-code-out:rgba(0, 0, 0, 0.14);

  /* Wallpaper behind chats and the home screen — a soft daylight glow. */
  --wall-base: #EEF0F4;
  --wall-1: rgba(255, 196, 150, 0.55);
  --wall-2: rgba(150, 170, 255, 0.45);
  --wall-3: rgba(110, 230, 180, 0.42);

  /* Avatars: fixed hues, picked from the name */
  --av-1: #FF8A5B; --av-2: #5B8CFF; --av-3: #2BC381; --av-4: #B26BFF;
  --av-5: #FFB938; --av-6: #FF5E8A; --av-7: #22B7C7; --av-8: #8E8E93;

  /* Scrim behind sheets and menus */
  --scrim: rgba(0, 0, 0, 0.22);
  --scrim-blur: blur(14px) saturate(140%);

  /* Depth */
  --e-sheet:   0 -8px 40px rgba(0, 0, 0, 0.14);
  --e-menu:    0 24px 60px rgba(0, 0, 0, 0.22);
  --e-lift:    0 18px 44px rgba(0, 0, 0, 0.24);

  /* Mockup canvas around the phone */
  --canvas:        #E7E8EC;
  --canvas-text:   #0A0A0F;
  --canvas-text-2: #6B6B75;
  --bezel:         #1B1B1F;
}

/* ===========================================================================
   DARK — same roles, other values. No screen needs to know which it is in.
   Warm dusk like the PWA: amber, indigo and mint light through dark glass.
   =========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0B0A0D;
  --bg-plain:    #000000;
  --surface:     #1A191E;
  --surface-2:   #25242A;
  --surface-3:   #313037;

  --text:   #F2F0F5;
  --text-2: rgba(235, 235, 245, 0.6);
  --text-3: rgba(235, 235, 245, 0.3);

  --line:        rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);

  --accent:      #4ADE9B;
  --on-accent:   #042A18;
  --accent-ink:  #4ADE9B;
  --accent-soft: rgba(74, 222, 155, 0.16);

  --danger:      #FF6961;
  --danger-soft: rgba(255, 105, 97, 0.16);
  --warn:        #FFB340;
  --info:        #409CFF;
  --online:      #30D158;

  --glass:        rgba(40, 38, 46, 0.62);
  --glass-thick:  rgba(30, 29, 35, 0.78);
  --glass-thin:   rgba(60, 58, 68, 0.3);
  --glass-tint:   rgba(74, 222, 155, 0.72);
  --glass-edge:   rgba(255, 255, 255, 0.16);
  --glass-rim:    rgba(0, 0, 0, 0.4);
  --glass-blur:   blur(24px) saturate(170%);
  --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --glass-shine:  inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.04);

  --bubble-in:      rgba(44, 42, 50, 0.86);
  --bubble-in-text: #F2F0F5;
  --bubble-out:     linear-gradient(180deg, #4ADE9B 0%, #2FC482 100%);
  --bubble-out-text:#03241A;
  --bubble-out-2:   rgba(3, 36, 26, 0.62);
  --bubble-out-tail:#2FC482;
  --bubble-code:    rgba(255, 255, 255, 0.07);
  --bubble-code-out:rgba(0, 0, 0, 0.14);

  --wall-base: #0B0A0D;
  --wall-1: rgba(232, 160, 106, 0.42);
  --wall-2: rgba(106, 124, 232, 0.38);
  --wall-3: rgba(74, 222, 155, 0.26);

  --av-1: #E8875F; --av-2: #5E86E8; --av-3: #3CC98A; --av-4: #A56BE8;
  --av-5: #E0A83C; --av-6: #E85E86; --av-7: #2FAFBD; --av-8: #6E6E78;

  --scrim: rgba(0, 0, 0, 0.45);
  --scrim-blur: blur(14px) saturate(120%);

  --e-sheet:   0 -8px 40px rgba(0, 0, 0, 0.6);
  --e-menu:    0 24px 60px rgba(0, 0, 0, 0.66);
  --e-lift:    0 18px 44px rgba(0, 0, 0, 0.6);

  --canvas:        #060508;
  --canvas-text:   #F2F0F5;
  --canvas-text-2: #8C8796;
  --bezel:         #2A2930;
}

/* Follow the system when no theme is chosen. Kept in step with the block
   above by hand — tools/verify-tokens is not worth it for one list. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0A0D; --bg-plain: #000000; --surface: #1A191E; --surface-2: #25242A; --surface-3: #313037;
    --text: #F2F0F5; --text-2: rgba(235,235,245,0.6); --text-3: rgba(235,235,245,0.3);
    --line: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.17);
    --accent: #4ADE9B; --on-accent: #042A18; --accent-ink: #4ADE9B; --accent-soft: rgba(74,222,155,0.16);
    --danger: #FF6961; --danger-soft: rgba(255,105,97,0.16); --warn: #FFB340; --info: #409CFF; --online: #30D158;
    --glass: rgba(40,38,46,0.62); --glass-thick: rgba(30,29,35,0.78); --glass-thin: rgba(60,58,68,0.3);
    --glass-tint: rgba(74,222,155,0.72); --glass-edge: rgba(255,255,255,0.16); --glass-rim: rgba(0,0,0,0.4);
    --glass-blur: blur(24px) saturate(170%);
    --glass-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    --glass-shine: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.04);
    --bubble-in: rgba(44,42,50,0.86); --bubble-in-text: #F2F0F5;
    --bubble-out: linear-gradient(180deg, #4ADE9B 0%, #2FC482 100%); --bubble-out-text: #03241A;
    --bubble-out-2: rgba(3,36,26,0.62); --bubble-out-tail: #2FC482; --bubble-code: rgba(255,255,255,0.07); --bubble-code-out: rgba(0,0,0,0.14);
    --wall-base: #0B0A0D; --wall-1: rgba(232,160,106,0.42); --wall-2: rgba(106,124,232,0.38); --wall-3: rgba(74,222,155,0.26);
    --av-1: #E8875F; --av-2: #5E86E8; --av-3: #3CC98A; --av-4: #A56BE8;
    --av-5: #E0A83C; --av-6: #E85E86; --av-7: #2FAFBD; --av-8: #6E6E78;
    --scrim: rgba(0,0,0,0.45); --scrim-blur: blur(14px) saturate(120%);
    --e-sheet: 0 -8px 40px rgba(0,0,0,0.6); --e-menu: 0 24px 60px rgba(0,0,0,0.66); --e-lift: 0 18px 44px rgba(0,0,0,0.6);
    --canvas: #060508; --canvas-text: #F2F0F5; --canvas-text-2: #8C8796; --bezel: #2A2930;
  }
}