/* GENERATED by zubda-native/scripts/tokens.mjs — do not edit by hand.
   Source of truth: src/theme/theme.ts and src/theme/motion.ts.
   Regenerate:  node zubda-native/scripts/tokens.mjs  */

:root {
  --radius-hair: 2px;
  --radius-dot: 4px;
  --radius-chip: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-card: 22px;
  --radius-lg: 26px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --space-s2: 2px;
  --space-s4: 4px;
  --space-s6: 6px;
  --space-s8: 8px;
  --space-s10: 10px;
  --space-s12: 12px;
  --space-s14: 14px;
  --space-s16: 16px;
  --space-s18: 18px;
  --space-s20: 20px;
  --space-s24: 24px;
  --space-s26: 26px;
  --space-s28: 28px;
  --space-s32: 32px;
  --space-s40: 40px;
  --space-s48: 48px;
  --ease-standard: cubic-bezier(0.25,0.1,0.25,1);
  --ease-in-out: cubic-bezier(0.42,0,0.58,1);
  --ease-out: cubic-bezier(0,0,0.58,1);
  --ease-in: cubic-bezier(0.42,0,1,1);
  --ease-settle: cubic-bezier(0.22,1,0.36,1);
  --ease-overshoot: cubic-bezier(0.24,1.34,0.38,1);
  --dur-press: 90ms;
  --dur-state: 220ms;
  --dur-enter: 240ms;
  --dur-exit: 160ms;
  --dur-nav: 350ms;
  --font-ar: "IBM Plex Sans Arabic","Geeza Pro",sans-serif;
  --font-ui: -apple-system,"SF Pro Text",system-ui,sans-serif;
  --font-mono: "IBM Plex Mono",ui-monospace,monospace;
}

/* Light. */
:root, .light {
  --bg: #EDEDEA;
  --grad-from: #FFFFFF;
  --grad-to: #D9DBD5;
  --surface: #FFFFFF;
  --surface2: #F2F2EF;
  --surface3: #E6E6E2;
  --headline-quiet: #A5A7AA;
  --scrim: rgba(20,20,20,0.34);
  --text: #17181A;
  --text-muted: #5A5C60;
  --text-faint: #74767A;
  --border: rgba(20,20,20,0.09);
  --border-strong: rgba(20,20,20,0.18);
  --accent: #17181A;
  --accent-ink: #FFFFFF;
  --accent-wash: rgba(20,20,20,0.06);
  --good: #3F7A42;
  --good-wash: rgba(63,122,66,0.12);
  --warn: #B0561F;
  --warn-wash: rgba(176,86,31,0.12);
  --ground-text: #17181A;
  --ground-muted: #5A5C60;
  --ground-faint: #5E6064;
  --mix-idle: #5C5E5A;
  --tab-bg: rgba(255,255,255,0.42);
  --tab-border: rgba(20,20,20,0.10);
  --tab-ink: #67696D;
  --tab-active-bg: rgba(20,20,20,0.07);
  --tab-active-ink: #17181A;
  --list-bg: #FFFFFF;
  --list-card: #F2F2EF;
  --topic-focus: #E4F35C;
  --topic-habits: #C3BEF7;
  --topic-decisions: #F4A48A;
  --topic-money: #AEDCC0;
  --topic-people: #F0B8CE;
  --topic-body: #A8CBEE;
  --topic-learning: #FFD93D;
  --topic-work: #F2A03D;
  --topic-history: #F1BD73;
  --topic-economy: #73D4AC;
  --topic-founders: #C2C46E;
  --topic-meaning: #E9CFFE;
  --topic-wellness: #FA9FB4;
  --topic-family: #FDD2A1;
  --topic-future: #9CE9FC;
  --topic-culture: #E2A5E5;
  --topic-focus-ink: #23280A;
  --topic-habits-ink: #1B1930;
  --topic-decisions-ink: #3A160C;
  --topic-money-ink: #0F2818;
  --topic-people-ink: #33121F;
  --topic-body-ink: #0D2033;
  --topic-learning-ink: #2A2000;
  --topic-work-ink: #301A00;
  --topic-history-ink: #2F1E02;
  --topic-economy-ink: #02291C;
  --topic-founders-ink: #232303;
  --topic-meaning-ink: #291A33;
  --topic-wellness-ink: #35161E;
  --topic-family-ink: #311D03;
  --topic-future-ink: #0F252B;
  --topic-culture-ink: #2E192F;
  --interest-region: #1F7A5C;
  --interest-vision: #6A7300;
  --interest-world: #545E6F;
  --interest-markets: #1E63A8;
  --interest-business: #96601A;
  --interest-tech: #5B47B5;
  --interest-ai: #9344AA;
  --interest-science: #14747F;
  --interest-health: #A82418;
  --interest-sport: #A8336B;
  --interest-region-wash: rgba(31,122,92,0.12);
  --interest-vision-wash: rgba(106,115,0,0.12);
  --interest-world-wash: rgba(84,94,111,0.12);
  --interest-markets-wash: rgba(30,99,168,0.12);
  --interest-business-wash: rgba(150,96,26,0.12);
  --interest-tech-wash: rgba(91,71,181,0.12);
  --interest-ai-wash: rgba(147,68,170,0.12);
  --interest-science-wash: rgba(20,116,127,0.12);
  --interest-health-wash: rgba(168,36,24,0.12);
  --interest-sport-wash: rgba(168,51,107,0.12);
  --glass-bar-fill: rgba(255,255,255,0.60);
  --glass-bar-blur: 30px;
  --glass-bar-sat: 1.5;
  --glass-bar-border: rgba(20,20,20,0.16);
  --glass-bar-sheen: rgba(255,255,255,0.95);
  --glass-bar-intensity: 68;
  --glass-control-fill: rgba(255,255,255,0.66);
  --glass-control-blur: 20px;
  --glass-control-sat: 1.8;
  --glass-control-border: rgba(20,20,20,0.16);
  --glass-control-sheen: rgba(255,255,255,0.95);
  --glass-control-intensity: 40;
  --glass-card-fill: rgba(255,255,255,0.64);
  --glass-card-blur: 11px;
  --glass-card-sat: 1.7;
  --glass-card-border: rgba(20,20,20,0.15);
  --glass-card-sheen: rgba(255,255,255,0.95);
  --glass-card-intensity: 32;
  --glass-peek-fill: rgba(255,255,255,0.72);
  --glass-peek-blur: 24px;
  --glass-peek-sat: 1.6;
  --glass-peek-border: rgba(20,20,20,0.16);
  --glass-peek-sheen: rgba(255,255,255,0.95);
  --glass-peek-intensity: 50;
}

/* Dark. Later in the file, so a .dark inside a .light still wins. */
.dark, :root[data-scheme="dark"] {
  --bg: #0F100E;
  --grad-from: #1A1C18;
  --grad-to: #0B0C0A;
  --surface: #1E201C;
  --surface2: #2A2C27;
  --surface3: #34362F;
  --headline-quiet: #6A6C67;
  --scrim: rgba(0,0,0,0.62);
  --text: #F1F2ED;
  --text-muted: #A7A9A1;
  --text-faint: #858783;
  --border: rgba(241,242,237,0.12);
  --border-strong: rgba(241,242,237,0.22);
  --accent: #F1F2ED;
  --accent-ink: #141513;
  --accent-wash: rgba(241,242,237,0.08);
  --good: #6FA859;
  --good-wash: rgba(111,168,89,0.14);
  --warn: #E08A4E;
  --warn-wash: rgba(224,138,78,0.14);
  --ground-text: #F1F2ED;
  --ground-muted: #A7A9A1;
  --ground-faint: #858783;
  --mix-idle: #45473F;
  --tab-bg: rgba(40,42,38,0.38);
  --tab-border: rgba(241,242,237,0.12);
  --tab-ink: #8B8D85;
  --tab-active-bg: rgba(241,242,237,0.14);
  --tab-active-ink: #F4F5F0;
  --list-bg: #0F100E;
  --list-card: #1E201C;
  --topic-focus: #E4F35C;
  --topic-habits: #C3BEF7;
  --topic-decisions: #F4A48A;
  --topic-money: #AEDCC0;
  --topic-people: #F0B8CE;
  --topic-body: #A8CBEE;
  --topic-learning: #FFD93D;
  --topic-work: #F2A03D;
  --topic-history: #F1BD73;
  --topic-economy: #73D4AC;
  --topic-founders: #C2C46E;
  --topic-meaning: #E9CFFE;
  --topic-wellness: #FA9FB4;
  --topic-family: #FDD2A1;
  --topic-future: #9CE9FC;
  --topic-culture: #E2A5E5;
  --topic-focus-ink: #23280A;
  --topic-habits-ink: #1B1930;
  --topic-decisions-ink: #3A160C;
  --topic-money-ink: #0F2818;
  --topic-people-ink: #33121F;
  --topic-body-ink: #0D2033;
  --topic-learning-ink: #2A2000;
  --topic-work-ink: #301A00;
  --topic-history-ink: #2F1E02;
  --topic-economy-ink: #02291C;
  --topic-founders-ink: #232303;
  --topic-meaning-ink: #291A33;
  --topic-wellness-ink: #35161E;
  --topic-family-ink: #311D03;
  --topic-future-ink: #0F252B;
  --topic-culture-ink: #2E192F;
  --interest-region: #5FC39B;
  --interest-vision: #9CAE61;
  --interest-world: #A5AFBE;
  --interest-markets: #6FAEE8;
  --interest-business: #D9A055;
  --interest-tech: #A794F0;
  --interest-ai: #D690E1;
  --interest-science: #56BFCB;
  --interest-health: #ED8171;
  --interest-sport: #E888B0;
  --interest-region-wash: rgba(95,195,155,0.12);
  --interest-vision-wash: rgba(156,174,97,0.12);
  --interest-world-wash: rgba(165,175,190,0.12);
  --interest-markets-wash: rgba(111,174,232,0.12);
  --interest-business-wash: rgba(217,160,85,0.12);
  --interest-tech-wash: rgba(167,148,240,0.12);
  --interest-ai-wash: rgba(214,144,225,0.12);
  --interest-science-wash: rgba(86,191,203,0.12);
  --interest-health-wash: rgba(237,129,113,0.12);
  --interest-sport-wash: rgba(232,136,176,0.12);
  --glass-bar-fill: rgba(40,42,38,0.38);
  --glass-bar-blur: 30px;
  --glass-bar-sat: 1.5;
  --glass-bar-border: rgba(241,242,237,0.12);
  --glass-bar-sheen: rgba(255,255,255,0.16);
  --glass-bar-intensity: 68;
  --glass-control-fill: rgba(255,255,255,0.07);
  --glass-control-blur: 20px;
  --glass-control-sat: 1.8;
  --glass-control-border: rgba(255,255,255,0.12);
  --glass-control-sheen: rgba(255,255,255,0.22);
  --glass-control-intensity: 40;
  --glass-card-fill: rgba(24,26,22,0.54);
  --glass-card-blur: 11px;
  --glass-card-sat: 1.7;
  --glass-card-border: rgba(255,255,255,0.07);
  --glass-card-sheen: rgba(255,255,255,0.10);
  --glass-card-intensity: 32;
  --glass-peek-fill: rgba(30,32,28,0.66);
  --glass-peek-blur: 24px;
  --glass-peek-sat: 1.6;
  --glass-peek-border: rgba(241,242,237,0.12);
  --glass-peek-sheen: rgba(255,255,255,0.14);
  --glass-peek-intensity: 50;
}

/* Type, mirrored from src/components/Txt.tsx. */
:root {
  --t-hero-size: 40px;
  --t-hero-lh: 43px;
  --t-hero-ar-lh: 53px;
  --t-hero-weight: 400;
  --t-display-size: 38px;
  --t-display-lh: 40px;
  --t-display-ar-lh: 51px;
  --t-display-weight: 400;
  --t-title-size: 31px;
  --t-title-lh: 34px;
  --t-title-ar-lh: 44px;
  --t-title-weight: 400;
  --t-head-size: 27px;
  --t-head-lh: 32px;
  --t-head-ar-lh: 48px;
  --t-head-weight: 500;
  --t-body-size: 17px;
  --t-body-lh: 26px;
  --t-body-ar-lh: 32px;
  --t-body-weight: 400;
  --t-label-size: 15px;
  --t-label-lh: 20px;
  --t-label-ar-lh: 28px;
  --t-label-weight: 400;
  --t-meta-size: 12.5px;
  --t-meta-lh: 16px;
  --t-meta-ar-lh: 23px;
  --t-meta-weight: 400;
  --t-small-size: 11.5px;
  --t-small-lh: 15px;
  --t-small-ar-lh: 21px;
  --t-small-weight: 400;
  --t-num-size: 27px;
  --t-num-lh: 29px;
  --t-num-ar-lh: 46px;
  --t-num-weight: 300;
}

.t-hero{font-size:var(--t-hero-size);line-height:var(--t-hero-lh);font-weight:var(--t-hero-weight)}
[dir="rtl"] .t-hero{line-height:var(--t-hero-ar-lh)}
.t-display{font-size:var(--t-display-size);line-height:var(--t-display-lh);font-weight:var(--t-display-weight)}
[dir="rtl"] .t-display{line-height:var(--t-display-ar-lh)}
.t-title{font-size:var(--t-title-size);line-height:var(--t-title-lh);font-weight:var(--t-title-weight)}
[dir="rtl"] .t-title{line-height:var(--t-title-ar-lh)}
.t-head{font-size:var(--t-head-size);line-height:var(--t-head-lh);font-weight:var(--t-head-weight)}
[dir="rtl"] .t-head{line-height:var(--t-head-ar-lh)}
.t-body{font-size:var(--t-body-size);line-height:var(--t-body-lh);font-weight:var(--t-body-weight)}
[dir="rtl"] .t-body{line-height:var(--t-body-ar-lh)}
.t-label{font-size:var(--t-label-size);line-height:var(--t-label-lh);font-weight:var(--t-label-weight)}
[dir="rtl"] .t-label{line-height:var(--t-label-ar-lh)}
.t-meta{font-size:var(--t-meta-size);line-height:var(--t-meta-lh);font-weight:var(--t-meta-weight)}
[dir="rtl"] .t-meta{line-height:var(--t-meta-ar-lh)}
.t-small{font-size:var(--t-small-size);line-height:var(--t-small-lh);font-weight:var(--t-small-weight)}
[dir="rtl"] .t-small{line-height:var(--t-small-ar-lh)}
.t-num{font-size:var(--t-num-size);line-height:var(--t-num-lh);font-weight:var(--t-num-weight)}
[dir="rtl"] .t-num{line-height:var(--t-num-ar-lh)}

/* Glass surfaces. Apply the class for the ROLE the surface plays.
   No draft should ever write its own blur radius again. */
.glass-bar{
  background: var(--glass-bar-fill);
  -webkit-backdrop-filter: blur(var(--glass-bar-blur)) saturate(calc(var(--glass-bar-sat) * 100%));
  backdrop-filter: blur(var(--glass-bar-blur)) saturate(calc(var(--glass-bar-sat) * 100%));
  border: .5px solid var(--glass-bar-border);
  box-shadow: inset 0 1px 0 var(--glass-bar-sheen), var(--drop, 0 0 #0000);
}
.glass-control{
  background: var(--glass-control-fill);
  -webkit-backdrop-filter: blur(var(--glass-control-blur)) saturate(calc(var(--glass-control-sat) * 100%));
  backdrop-filter: blur(var(--glass-control-blur)) saturate(calc(var(--glass-control-sat) * 100%));
  border: .5px solid var(--glass-control-border);
  box-shadow: inset 0 1px 0 var(--glass-control-sheen), var(--drop, 0 0 #0000);
}
.glass-card{
  background: var(--glass-card-fill);
  -webkit-backdrop-filter: blur(var(--glass-card-blur)) saturate(calc(var(--glass-card-sat) * 100%));
  backdrop-filter: blur(var(--glass-card-blur)) saturate(calc(var(--glass-card-sat) * 100%));
  border: .5px solid var(--glass-card-border);
  box-shadow: inset 0 1px 0 var(--glass-card-sheen), var(--drop, 0 0 #0000);
}
.glass-peek{
  background: var(--glass-peek-fill);
  -webkit-backdrop-filter: blur(var(--glass-peek-blur)) saturate(calc(var(--glass-peek-sat) * 100%));
  backdrop-filter: blur(var(--glass-peek-blur)) saturate(calc(var(--glass-peek-sat) * 100%));
  border: .5px solid var(--glass-peek-border);
  box-shadow: inset 0 1px 0 var(--glass-peek-sheen), var(--drop, 0 0 #0000);
}

/* iOS corners are continuous curves, not circular arcs. Safari is the only
   engine that draws them, but the drafts are read in Safari. */
.squircle{border-radius:var(--radius-card);-webkit-border-radius:var(--radius-card)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}