/* Forma design tokens (CSS custom properties) * GENERATED by `pnpm --filter @forma/design-tokens build` from figma/variables.json * (Figma Nkw9kImmtF0gZpp7YyPckT, nodes 14:2, 315:11977, 315:12074, 58:2, 60:2, exported 2026-10-04). * Do not edit by hand. */ :root { /* Primitives (Figma collection Primitives) — the only place raw colours live */ --forma-green-primary: #2c8a4f; --forma-green-icon: #1f8a45; --forma-green-forest: #1f6038; --forma-green-pine: #0c2e1b; --forma-green-deep: #163a25; --forma-green-sprout: #7cc98f; --forma-green-mint: #9fe0b2; --forma-green-signal: #7cf2a0; --forma-green-ios: #34c759; --forma-green-wallpaper-hi: #eff7ec; --forma-green-wallpaper-lo: #e7f1e6; --forma-ink-900: #10271a; --forma-ink-800: #0f2417; --forma-ink-600: #46604a; --forma-ink-500: #5a6f5d; --forma-ink-400: #8aa28e; --forma-ink-300: #9bb09f; --forma-white-1000: #ffffff; --forma-warm-gold: #ffc95a; --forma-warm-amber: #ffb23e; --forma-warm-caution: #ff8a3d; --forma-warm-alert: #ff3b30; --forma-warm-gold-ink: #b07d12; --forma-warm-amber-ink: #9a6500; --forma-warm-caution-ink: #c2560e; --forma-warm-alert-ink: #c2231a; --forma-macro-protein: #2c8a4f; --forma-macro-carbs: #c77b00; --forma-macro-fat: #4e7c8b; --forma-shadow-green: #143720; --forma-shadow-hero: #0f2d1c; --forma-alpha-white-90: #ffffffe5; --forma-alpha-white-85: #ffffffd9; --forma-alpha-white-70: #ffffffb2; --forma-alpha-white-65: #ffffffa6; --forma-alpha-white-60: #ffffff99; --forma-alpha-white-55: #ffffff8c; --forma-alpha-white-46: #ffffff75; --forma-alpha-white-35: #ffffff59; --forma-alpha-white-32: #ffffff52; --forma-alpha-white-16: #ffffff29; --forma-alpha-ink-04: #10271a0a; --forma-alpha-ink-05: #10271a0d; --forma-alpha-ink-06: #10271a0f; --forma-alpha-ink-07: #10271a12; --forma-alpha-ink-08: #10271a14; --forma-alpha-ink-09: #10271a17; --forma-alpha-ink-10: #10271a1a; --forma-alpha-ink-12: #10271a1f; --forma-alpha-ink-16: #10271a29; --forma-alpha-ink-18: #10271a2e; --forma-alpha-green-10: #2c8a4f1a; --forma-alpha-green-12: #2c8a4f1f; --forma-alpha-green-18: #2c8a4f2e; --forma-alpha-green-20: #2c8a4f33; --forma-alpha-green-70: #2c8a4fb2; --forma-alpha-ios-16: #34c75929; --forma-alpha-ios-22: #34c75938; --forma-alpha-gold-22: #ffc95a38; --forma-alpha-gold-34: #ffc95a57; --forma-alpha-amber-20: #ffb23e33; --forma-alpha-amber-30: #ffb23e4d; --forma-alpha-caution-14: #ff8a3d24; --forma-alpha-caution-15: #ff8a3d26; --forma-alpha-alert-13: #ff3b3021; --forma-alpha-shadow-green-40: #14372066; --forma-alpha-shadow-green-45: #14372073; --forma-alpha-shadow-green-50: #14372080; --forma-alpha-shadow-hero-60: #0f2d1c99; --forma-green-action-ink: #227041; --forma-green-night-hi: #122a1b; --forma-green-night-lo: #0b1c12; --forma-green-mist: #beecc8; --forma-alpha-white-06: #ffffff0f; --forma-alpha-white-08: #ffffff14; --forma-alpha-white-10: #ffffff1a; --forma-alpha-white-12: #ffffff1f; --forma-alpha-mint-16: #9fe0b229; --forma-alpha-mint-24: #9fe0b23d; --forma-alpha-mint-20: #9fe0b233; --forma-alpha-mint-55: #9fe0b28c; --forma-alpha-sprout-20: #7cc98f33; --forma-alpha-sprout-60: #7cc98f99; --forma-alpha-mist-75: #beecc8bf; --forma-alpha-ink-60: #10271a99; --forma-warm-alert-soft: #ff6b61; --forma-green-draft-hi: #eff5f1; --forma-green-draft-lo: #e4eee8; --forma-green-draft-line: #9fbea9; --forma-green-draft-ink: #3f7355; --forma-green-evidence: #e6eee9; /* Semantic colours, Light mode (Figma collection Color) */ --forma-surface-glass-chip: var(--forma-alpha-white-55); --forma-surface-glass-card: var(--forma-alpha-white-55); --forma-surface-glass-bar: var(--forma-alpha-white-46); --forma-surface-row: var(--forma-alpha-white-60); --forma-surface-field: var(--forma-alpha-white-65); --forma-surface-sheet: var(--forma-alpha-white-70); --forma-surface-solid: var(--forma-white-1000); --forma-surface-wash: var(--forma-alpha-ink-05); --forma-surface-wash-strong: var(--forma-alpha-ink-06); --forma-surface-tint: var(--forma-alpha-green-12); --forma-surface-tint-strong: var(--forma-alpha-green-18); --forma-surface-hero: var(--forma-green-forest); --forma-surface-hero-base: var(--forma-green-pine); --forma-surface-scrim: var(--forma-alpha-ink-18); --forma-surface-disabled: var(--forma-alpha-ink-10); --forma-surface-page-hi: var(--forma-green-wallpaper-hi); --forma-surface-page-lo: var(--forma-green-wallpaper-lo); --forma-text-heading: var(--forma-ink-900); --forma-text-body: var(--forma-ink-800); --forma-text-secondary: var(--forma-ink-600); --forma-text-nav-inactive: var(--forma-ink-500); --forma-text-muted: var(--forma-ink-400); --forma-text-disabled: var(--forma-ink-300); --forma-text-action: var(--forma-green-action-ink); --forma-text-on-green: var(--forma-white-1000); --forma-text-on-hero: var(--forma-white-1000); --forma-text-on-hero-dim: var(--forma-alpha-white-70); --forma-action-primary: var(--forma-green-action-ink); --forma-action-primary-text: var(--forma-white-1000); --forma-action-secondary: var(--forma-white-1000); --forma-action-secondary-text: var(--forma-ink-900); --forma-action-tonal: var(--forma-alpha-green-12); --forma-action-tonal-text: var(--forma-green-action-ink); --forma-action-disabled: var(--forma-alpha-ink-10); --forma-action-disabled-text: var(--forma-ink-300); --forma-border-hairline: var(--forma-alpha-ink-07); --forma-border-field: var(--forma-alpha-ink-09); --forma-border-divider: var(--forma-alpha-ink-08); --forma-border-focus: var(--forma-green-primary); --forma-border-tint: var(--forma-alpha-green-20); --forma-border-glass-inner: var(--forma-alpha-white-32); --forma-border-glass-top: var(--forma-alpha-white-85); --forma-icon-default: var(--forma-green-icon); --forma-icon-muted: var(--forma-ink-500); --forma-icon-inactive: var(--forma-ink-500); --forma-icon-on-green: var(--forma-white-1000); --forma-icon-warm: var(--forma-warm-gold-ink); --forma-signal-critical: var(--forma-warm-alert); --forma-signal-critical-fill: var(--forma-alpha-alert-13); --forma-signal-critical-text: var(--forma-warm-alert-ink); --forma-signal-warning: var(--forma-warm-caution); --forma-signal-warning-fill: var(--forma-alpha-caution-14); --forma-signal-warning-text: var(--forma-warm-caution-ink); --forma-signal-pending: var(--forma-warm-amber); --forma-signal-pending-fill: var(--forma-alpha-amber-20); --forma-signal-pending-text: var(--forma-warm-amber-ink); --forma-signal-ok: var(--forma-green-primary); --forma-signal-ok-fill: var(--forma-alpha-green-12); --forma-signal-ok-text: var(--forma-green-action-ink); --forma-signal-neutral-fill: var(--forma-alpha-ink-06); --forma-signal-neutral-text: var(--forma-ink-600); --forma-signal-live: var(--forma-green-ios); --forma-signal-streak: var(--forma-green-signal); --forma-data-protein: var(--forma-macro-protein); --forma-data-carbs: var(--forma-macro-carbs); --forma-data-fat: var(--forma-macro-fat); --forma-data-adherence: var(--forma-green-primary); --forma-data-intake: var(--forma-warm-amber); --forma-data-track: var(--forma-alpha-ink-10); --forma-data-track-warm: var(--forma-alpha-gold-22); --forma-surface-draft: var(--forma-green-draft-hi); --forma-surface-draft-strong: var(--forma-green-draft-lo); --forma-border-draft: var(--forma-green-draft-line); --forma-text-draft: var(--forma-green-draft-ink); --forma-surface-evidence: var(--forma-green-evidence); --forma-text-action-strong: var(--forma-green-action-ink); --forma-text-tertiary: var(--forma-ink-500); --forma-surface-glass-on-hero: var(--forma-alpha-white-16); --forma-border-glass-on-hero: var(--forma-alpha-white-32); --forma-action-primary-brand: var(--forma-green-primary); /* Radius (Figma collection Radius; main/leaf pairs) */ --forma-radius-tile-main: 11px; --forma-radius-tile-leaf: 5px; --forma-radius-icon-main: 14px; --forma-radius-icon-leaf: 6px; --forma-radius-button-main: 16px; --forma-radius-button-leaf: 8px; --forma-radius-banner-main: 22px; --forma-radius-banner-leaf: 10px; --forma-radius-card-main: 26px; --forma-radius-card-leaf: 12px; --forma-radius-hero-main: 34px; --forma-radius-hero-leaf: 14px; --forma-radius-chip: 11px; --forma-radius-field: 14px; --forma-radius-pill: 30px; --forma-radius-full: 9999px; /* Spacing and layout sizes (Figma collection Spacing) */ --forma-spacing-xs: 4px; --forma-spacing-sm: 8px; --forma-spacing-md: 12px; --forma-spacing-lg: 16px; --forma-spacing-xl: 24px; --forma-spacing-2xl: 40px; --forma-spacing-section: 54px; --forma-size-row: 52px; --forma-size-row-compact: 44px; --forma-size-topbar: 64px; --forma-size-sidebar: 248px; --forma-size-sidebar-collapsed: 72px; --forma-size-thread-list: 320px; --forma-size-drawer: 480px; --forma-size-page-max: 1440px; --forma-spacing-3xl: 32px; --forma-spacing-4xl: 64px; --forma-spacing-hero: 88px; /* Typography (Figma collection Typography). Mono maps to Inter tabular (plan Q5). */ --forma-font-family-sans: var(--font-inter, "Inter"), var(--font-noto-arabic, "Noto Sans Arabic"), system-ui, sans-serif; --forma-font-family-mono: var(--forma-font-family-sans); --forma-font-weight-regular: 400; --forma-font-weight-medium: 500; --forma-font-weight-semibold: 600; --forma-font-weight-bold: 700; --forma-font-weight-heavy: 800; --forma-font-size-display: 45px; --forma-font-size-title: 29px; --forma-font-size-section: 20px; --forma-font-size-body-lg: 17px; --forma-font-size-body: 14.5px; --forma-font-size-caption: 13.5px; --forma-font-size-label: 12.5px; --forma-font-size-micro: 11px; --forma-font-size-metric: 24.5px; --forma-font-size-metric-lg: 36px; --forma-font-size-lead: 22.5px; --forma-font-size-display-cover: 85px; --forma-tracking-display: -1.4px; --forma-tracking-title: -0.65px; --forma-tracking-section: -0.36px; --forma-tracking-normal: 0; --forma-tracking-eyebrow: 1.32px; --forma-tracking-label: 0.11px; --forma-tracking-micro: 0.2px; /* Text styles (Figma local text styles) */ --forma-type-display-40-family: var(--forma-font-family-sans); --forma-type-display-40-weight: 700; --forma-type-display-40-size: 45px; --forma-type-display-40-line-height: 40px; --forma-type-display-40-letter-spacing: -1.4px; --forma-type-display-40-numeric: normal; --forma-type-title-26-family: var(--forma-font-family-sans); --forma-type-title-26-weight: 700; --forma-type-title-26-size: 29px; --forma-type-title-26-line-height: 28px; --forma-type-title-26-letter-spacing: -0.65px; --forma-type-title-26-numeric: normal; --forma-type-section-18-family: var(--forma-font-family-sans); --forma-type-section-18-weight: 700; --forma-type-section-18-size: 20px; --forma-type-section-18-line-height: 22px; --forma-type-section-18-letter-spacing: -0.36px; --forma-type-section-18-numeric: normal; --forma-type-metric-32-family: var(--forma-font-family-sans); --forma-type-metric-32-weight: 700; --forma-type-metric-32-size: 36px; --forma-type-metric-32-line-height: 34px; --forma-type-metric-32-letter-spacing: -0.9px; --forma-type-metric-32-numeric: tabular-nums; --forma-type-metric-22-family: var(--forma-font-family-sans); --forma-type-metric-22-weight: 700; --forma-type-metric-22-size: 24.5px; --forma-type-metric-22-line-height: 24px; --forma-type-metric-22-letter-spacing: -0.44px; --forma-type-metric-22-numeric: tabular-nums; --forma-type-body-15-family: var(--forma-font-family-sans); --forma-type-body-15-weight: 500; --forma-type-body-15-size: 17px; --forma-type-body-15-line-height: 22px; --forma-type-body-15-letter-spacing: 0; --forma-type-body-15-numeric: normal; --forma-type-body-15-emphasis-family: var(--forma-font-family-sans); --forma-type-body-15-emphasis-weight: 600; --forma-type-body-15-emphasis-size: 17px; --forma-type-body-15-emphasis-line-height: 22px; --forma-type-body-15-emphasis-letter-spacing: 0; --forma-type-body-15-emphasis-numeric: normal; --forma-type-body-13-family: var(--forma-font-family-sans); --forma-type-body-13-weight: 500; --forma-type-body-13-size: 14.5px; --forma-type-body-13-line-height: 20px; --forma-type-body-13-letter-spacing: 0; --forma-type-body-13-numeric: normal; --forma-type-body-13-emphasis-family: var(--forma-font-family-sans); --forma-type-body-13-emphasis-weight: 600; --forma-type-body-13-emphasis-size: 14.5px; --forma-type-body-13-emphasis-line-height: 20px; --forma-type-body-13-emphasis-letter-spacing: 0; --forma-type-body-13-emphasis-numeric: normal; --forma-type-caption-12-family: var(--forma-font-family-sans); --forma-type-caption-12-weight: 500; --forma-type-caption-12-size: 13.5px; --forma-type-caption-12-line-height: 17px; --forma-type-caption-12-letter-spacing: 0; --forma-type-caption-12-numeric: normal; --forma-type-caption-12-emphasis-family: var(--forma-font-family-sans); --forma-type-caption-12-emphasis-weight: 600; --forma-type-caption-12-emphasis-size: 13.5px; --forma-type-caption-12-emphasis-line-height: 17px; --forma-type-caption-12-emphasis-letter-spacing: 0; --forma-type-caption-12-emphasis-numeric: normal; --forma-type-label-11-family: var(--forma-font-family-sans); --forma-type-label-11-weight: 600; --forma-type-label-11-size: 12.5px; --forma-type-label-11-line-height: 15px; --forma-type-label-11-letter-spacing: 0.11px; --forma-type-label-11-numeric: normal; --forma-type-micro-10-family: var(--forma-font-family-sans); --forma-type-micro-10-weight: 600; --forma-type-micro-10-size: 11px; --forma-type-micro-10-line-height: 13px; --forma-type-micro-10-letter-spacing: 0.2px; --forma-type-micro-10-numeric: normal; --forma-type-eyebrow-11-family: var(--forma-font-family-sans); --forma-type-eyebrow-11-weight: 600; --forma-type-eyebrow-11-size: 12.5px; --forma-type-eyebrow-11-line-height: 14px; --forma-type-eyebrow-11-letter-spacing: 1.32px; --forma-type-eyebrow-11-numeric: normal; --forma-type-mono-12-family: var(--forma-font-family-mono); --forma-type-mono-12-weight: 400; --forma-type-mono-12-size: 13.5px; --forma-type-mono-12-line-height: 17px; --forma-type-mono-12-letter-spacing: 0; --forma-type-mono-12-numeric: tabular-nums; --forma-type-mono-11-family: var(--forma-font-family-mono); --forma-type-mono-11-weight: 500; --forma-type-mono-11-size: 12.5px; --forma-type-mono-11-line-height: 16px; --forma-type-mono-11-letter-spacing: 0; --forma-type-mono-11-numeric: tabular-nums; --forma-type-display-76-cover-family: var(--forma-font-family-sans); --forma-type-display-76-cover-weight: 700; --forma-type-display-76-cover-size: 85px; --forma-type-display-76-cover-line-height: 78px; --forma-type-display-76-cover-letter-spacing: -2.66px; --forma-type-display-76-cover-numeric: normal; --forma-type-lead-20-family: var(--forma-font-family-sans); --forma-type-lead-20-weight: 500; --forma-type-lead-20-size: 22.5px; --forma-type-lead-20-line-height: 31px; --forma-type-lead-20-letter-spacing: 0; --forma-type-lead-20-numeric: normal; /* Effects (Figma local effect styles; colours are unbound in Figma) */ --forma-effect-glass-l1-chip-shadow: inset 0 1px 0 0 #ffffffcc, 0 0 0 0.8px #10271a0f, 0 3px 10px -6px #1437202e; --forma-effect-glass-l1-chip-blur: 18px; --forma-effect-glass-l2-card-shadow: inset 0 1px 0 0 #ffffffd9, inset 0 0 0 1px #ffffff52, 0 0 0 0.8px #10271a0f, 0 6px 18px -12px #14372033; --forma-effect-glass-l2-card-blur: 26px; --forma-effect-glass-l3-bar-shadow: inset 0 1px 0 0 #ffffffe5, inset 0 0 0 1px #ffffff59, 0 0 0 0.8px #10271a0f, 0 8px 22px -14px #1437203d; --forma-effect-glass-l3-bar-blur: 34px; --forma-effect-solid-hero-shadow: 0 16px 40px -26px #0f2d1c61; --forma-effect-solid-banner-shadow: 0 8px 20px -14px #0f2d1c57; --forma-effect-solid-button-shadow: 0 4px 12px -7px #2c8a4f61, inset 0 1px 0 0 #ffffff66; --forma-effect-solid-raised-shadow: 0 3px 9px -7px #14372038, 0 0 0 0.8px #10271a0f; --forma-effect-edge-hairline-shadow: 0 0 0 0.8px #10271a0f; } /* Dark mode (Figma Color/Dark, 315:11977). Exported, not wired: Light only in MVP (ND-27). */ [data-theme="dark"] { --forma-surface-glass-chip: var(--forma-alpha-white-12); --forma-surface-glass-card: var(--forma-alpha-white-08); --forma-surface-glass-bar: var(--forma-alpha-white-12); --forma-surface-row: var(--forma-alpha-white-06); --forma-surface-field: var(--forma-alpha-white-08); --forma-surface-sheet: var(--forma-alpha-white-16); --forma-surface-solid: var(--forma-green-deep); --forma-surface-wash: var(--forma-alpha-white-06); --forma-surface-wash-strong: var(--forma-alpha-white-08); --forma-surface-tint: var(--forma-alpha-mint-16); --forma-surface-tint-strong: var(--forma-alpha-mint-24); --forma-surface-hero: var(--forma-green-forest); --forma-surface-hero-base: var(--forma-green-pine); --forma-surface-scrim: var(--forma-alpha-ink-60); --forma-surface-disabled: var(--forma-alpha-white-10); --forma-surface-page-hi: var(--forma-green-night-hi); --forma-surface-page-lo: var(--forma-green-night-lo); --forma-text-heading: var(--forma-white-1000); --forma-text-body: var(--forma-alpha-white-90); --forma-text-secondary: var(--forma-alpha-white-70); --forma-text-nav-inactive: var(--forma-alpha-white-60); --forma-text-muted: var(--forma-alpha-white-46); --forma-text-disabled: var(--forma-alpha-white-35); --forma-text-action: var(--forma-green-mint); --forma-text-on-green: var(--forma-ink-900); --forma-text-on-hero: var(--forma-white-1000); --forma-text-on-hero-dim: var(--forma-alpha-white-70); --forma-action-primary: var(--forma-green-mint); --forma-action-primary-text: var(--forma-ink-900); --forma-action-secondary: var(--forma-alpha-white-12); --forma-action-secondary-text: var(--forma-white-1000); --forma-action-tonal: var(--forma-alpha-mint-16); --forma-action-tonal-text: var(--forma-green-mint); --forma-action-disabled: var(--forma-alpha-white-10); --forma-action-disabled-text: var(--forma-alpha-white-35); --forma-border-hairline: var(--forma-alpha-white-10); --forma-border-field: var(--forma-alpha-white-16); --forma-border-divider: var(--forma-alpha-white-10); --forma-border-focus: var(--forma-green-mint); --forma-border-tint: var(--forma-alpha-mint-24); --forma-border-glass-inner: var(--forma-alpha-white-16); --forma-border-glass-top: var(--forma-alpha-white-32); --forma-icon-default: var(--forma-green-mint); --forma-icon-muted: var(--forma-alpha-white-60); --forma-icon-inactive: var(--forma-alpha-white-60); --forma-icon-on-green: var(--forma-ink-900); --forma-icon-warm: var(--forma-warm-gold); --forma-signal-critical: var(--forma-warm-alert); --forma-signal-critical-fill: var(--forma-alpha-alert-13); --forma-signal-critical-text: var(--forma-warm-alert-soft); --forma-signal-warning: var(--forma-warm-caution); --forma-signal-warning-fill: var(--forma-alpha-caution-14); --forma-signal-warning-text: var(--forma-warm-caution); --forma-signal-pending: var(--forma-warm-amber); --forma-signal-pending-fill: var(--forma-alpha-amber-20); --forma-signal-pending-text: var(--forma-warm-amber); --forma-signal-ok: var(--forma-green-mint); --forma-signal-ok-fill: var(--forma-alpha-mint-16); --forma-signal-ok-text: var(--forma-green-mint); --forma-signal-neutral-fill: var(--forma-alpha-white-10); --forma-signal-neutral-text: var(--forma-alpha-white-70); --forma-signal-live: var(--forma-green-ios); --forma-signal-streak: var(--forma-green-signal); --forma-data-protein: var(--forma-green-mint); --forma-data-carbs: var(--forma-warm-amber); --forma-data-fat: var(--forma-macro-fat); --forma-data-adherence: var(--forma-green-mint); --forma-data-intake: var(--forma-warm-amber); --forma-data-track: var(--forma-alpha-white-16); --forma-data-track-warm: var(--forma-alpha-gold-22); --forma-surface-draft: var(--forma-alpha-white-06); --forma-surface-draft-strong: var(--forma-alpha-white-10); --forma-border-draft: var(--forma-green-sprout); --forma-text-draft: var(--forma-green-mint); --forma-surface-evidence: var(--forma-alpha-white-08); --forma-text-action-strong: var(--forma-green-mint); --forma-text-tertiary: var(--forma-alpha-white-60); --forma-surface-glass-on-hero: var(--forma-alpha-white-16); --forma-border-glass-on-hero: var(--forma-alpha-white-32); --forma-action-primary-brand: var(--forma-green-mint); } /* Reduced transparency (Figma 315:12074): glass fills fall back to surface/solid, blur off. */ @media (prefers-reduced-transparency: reduce) { :root { --forma-surface-glass-chip: var(--forma-surface-solid); --forma-surface-glass-card: var(--forma-surface-solid); --forma-surface-glass-bar: var(--forma-surface-solid); --forma-effect-glass-l1-chip-blur: 0; --forma-effect-glass-l2-card-blur: 0; --forma-effect-glass-l3-bar-blur: 0; } }