/* ─────────────────────────────────────────────────────────────────────────
 * Swoo Design System 3.0 — tokens.css
 * Source of truth: source/figma-tokens.md (Figma file KcU03nspHQ5JayrAN6tB5i,
 * local paint styles + "Dev Colors" variables, read 2026-09-27).
 * Component tokens: source/components.md + source/components/*.png (Figma file
 * uYJaYnV8hkcFCUY7wu0Gwv "Components"). Values marked "measured" were sampled
 * from those renders; "inferred" = from screen anatomy, no Figma style.
 * ─────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ── Brand (paint styles) ─────────────────────────────────────────── */
  --brand-primary:   #876DEE;
  --brand-secondary: #4D14B2;
  --brand-tertiary:  #EE5A9F;
  --brand-alternate: #14133E; /* Abyss */

  /* ── Utility (paint styles, static) ───────────────────────────────── */
  --utility-text-primary:   #000000;
  --utility-text-secondary: #8983AA;
  --utility-bg-primary:     #FFFFFF;
  --utility-bg-secondary:   #423669;
  --utility-icon-primary:   #FFFFFF;
  --utility-icon-secondary: linear-gradient(90deg, #826DEE, #9383E2);

  /* ── Semantic ─────────────────────────────────────────────────────── */
  --success: #74E494;
  --error:   #FD547E;
  --warning: #F4AC20;
  --info:    #876DEE;
  --warn:    var(--warning); /* A2 contract aliases */
  --danger:  var(--error);

  /* ── Accents (15 % tints) ─────────────────────────────────────────── */
  --accent-violet-15: rgb(135 109 238 / 0.15);
  --accent-orange-15: rgb(244 172 32 / 0.15);
  --accent-red-15:    rgb(253 84 126 / 0.15);
  --accent-green-15:  rgb(116 228 148 / 0.15);

  /* ── Gradient parts ───────────────────────────────────────────────── */
  --gp-russian-violet:    #2A1557;
  --gp-cyan-cobalt-blue:  #335E9F;
  --gp-grape:             #7634A8;
  --gp-lavender-light:    #EDE2E9;
  --gp-lavender-dark:     #B3A9E8;
  --gp-violet-dark:       #826DEE;
  --gp-violet-light:      #9383E2;
  --gp-abyss-dark:        #14133E;
  --gp-abyss-light:       #423669;
  --gp-sour-orange:       #F1C44A;
  --gp-light-blue:        #909CFF;
  --gp-turquoise:         #5ECDB8;
  --gp-menthol:           #92DBD1;
  --gp-amaranth:          #DA00A5;
  --gp-burnt-sienna:      #F774A7;
  --gp-barbie:            #D47DE2;

  /* ── Dev Colors (themed variables) — Light mode ───────────────────── */
  --text-primary:       #000000;
  --icon-primary:       #FFFFFF;
  --bg-top:             #423669; /* "BG lite color (TOP)" */
  --bg-btm:             #14133E; /* "BG dark color (BTM)" */
  --background-primary: #FFFFFF;
  /* "Background Secondary" is an alias in Figma; target not extracted → bound to --surface. */
  --background-secondary: var(--surface);

  /* ── Gradients ────────────────────────────────────────────────────── */
  --gradient-violet: linear-gradient(90deg, #9383E2, #826DEE); /* direction inferred */
  --gradient-app-bg: linear-gradient(180deg, var(--bg-top), var(--bg-btm));

  /* ── A1 identity (OpenDesign contract) ────────────────────────────── */
  --bg:      var(--background-primary);
  --fg:      var(--text-primary);
  --surface: color-mix(in oklab, var(--brand-primary) 8%, var(--background-primary));
  --muted:   #8983AA;
  --border:  color-mix(in oklab, #8983AA 28%, transparent);
  --accent:  #876DEE;

  --accent-on:     #FFFFFF;
  --accent-hover:  color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);

  /* Primary / soft action = Figma Button Primary / Secondary (same in both themes). */
  --action-bg:       var(--btn-primary-bg);
  --action-fg:       var(--btn-primary-fg);
  --action-soft-bg:  var(--btn-secondary-bg);
  --action-soft-fg:  var(--btn-secondary-fg);

  /* ── Fonts ────────────────────────────────────────────────────────── */
  --font-display: "PP Object Sans", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "PP Object Sans", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  /* ── Type scale: font shorthand + tracking (px) ───────────────────── */
  --type-heading-megalarge: 700 40px/40px var(--font-display); --track-heading-megalarge: 0.37px;
  --type-heading-xxlarge:   600 34px/40px var(--font-display); --track-heading-xxlarge:   0.4px;
  --type-heading-xlarge:    700 28px/36px var(--font-display); --track-heading-xlarge:    0px;
  --type-heading-large:     700 24px/32px var(--font-display); --track-heading-large:     0px;
  --type-heading-medium:    600 20px/26px var(--font-display); --track-heading-medium:    0.2px;
  --type-heading-small:     600 16px/22px var(--font-display); --track-heading-small:     0.2px;
  --type-heading-xsmall:    600 14px/18px var(--font-display); --track-heading-xsmall:    0.2px;
  --type-input-xlarge:      600 28px/36px var(--font-body);    --track-input-xlarge:      0.15px;
  --type-input-large:       500 20px/28px var(--font-body);    --track-input-large:       0.15px;
  --type-input-medium:      500 18px/24px var(--font-body);    --track-input-medium:      0.5px;
  --type-body-large:        500 20px/28px var(--font-body);    --track-body-large:        0.15px;
  --type-body-medium:       500 16px/24px var(--font-body);    --track-body-medium:       0.15px;
  --type-body-small:        500 14px/20px var(--font-body);    --track-body-small:        0.2px;
  --type-body-xsmall:       500 12px/16px var(--font-body);    --track-body-xsmall:       0.2px;
  --type-paragraph-large:   400 20px/28px var(--font-body);    --track-paragraph-large:   0.15px;
  --type-paragraph-medium:  400 16px/24px var(--font-body);    --track-paragraph-medium:  0.15px;
  --type-paragraph-small:   400 14px/20px var(--font-body);    --track-paragraph-small:   0.25px;
  --type-paragraph-xsmall:  400 12px/16px var(--font-body);    --track-paragraph-xsmall:  0.4px;
  --type-label-large:       700 22px/30px var(--font-body);    --track-label-large:       0.15px;
  --type-label-medium:      600 16px/24px var(--font-body);    --track-label-medium:      0.3px;
  --type-label-xsmall:      500 12px/16px var(--font-body);    --track-label-xsmall:      0.2px;
  --type-label-xsmall-caps: 600 10px/14px var(--font-body);    --track-label-xsmall-caps: 0.8px;
  --type-label-xxsmall:     500 10px/14px var(--font-body);    --track-label-xxsmall:     0px;
  --type-label-xxsmall-bold:700 10px/14px var(--font-body);    --track-label-xxsmall-bold:0px;

  /* ── Spacing (4 px grid) ──────────────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --gutter:   16px; /* screen side margin */
  --grid-gap: 16px; /* card grid gap */

  /* ── Radius ───────────────────────────────────────────────────────── */
  --radius-sm:     8px;  /* card thumbnails, chips, tooltip */
  --radius-md:     12px; /* text inputs, search field (measured) */
  --radius-lg:     16px;
  --radius-navbar: 24px;
  --radius-sheet:  40px; /* Main-screen content sheet (inferred) */
  --radius-btn:    16px; /* Button, Figma */
  --radius-pill:   9999px;
  --radius-card:   var(--radius-sm);

  /* ── Component sizes ──────────────────────────────────────────────── */
  --frame-width:    360px;
  --topbar-height:  44px;
  --navbar-width:   328px;
  --navbar-height:  72px;
  --control-height: 48px; /* = Button Compact, Figma */
  --tap-min:        44px;

  /* ── Elevation ────────────────────────────────────────────────────── */
  --elev-flat:   none;
  --elev-ring:   0 0 0 1px var(--border);
  --elev-raised: 0 2px 8px color-mix(in oklab, #14133E, transparent 90%);
  --elev-navbar: 0 12px 32px color-mix(in oklab, #14133E, transparent 65%);
  --elev-sheet:  0 -8px 32px color-mix(in oklab, #14133E, transparent 80%);

  /* ── Focus + motion ───────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 55%);
  --motion-fast:   150ms;
  --motion-base:   200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ── Dev Colors — Dark mode ─────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --text-primary:       #FFFFFF;
  --icon-primary:       #DAD8D8;
  --bg-top:             #14133E;
  --bg-btm:             #040411;
  --background-primary: #242136;

  --surface: color-mix(in oklab, white 6%, var(--background-primary));
  --border:  color-mix(in oklab, white 12%, transparent);

  --elev-raised: 0 2px 8px rgb(0 0 0 / 0.35);
  --elev-navbar: 0 12px 32px rgb(0 0 0 / 0.5);
  --elev-sheet:  0 -8px 32px rgb(0 0 0 / 0.4);
}

/* ── Component tokens (Figma "Components" library) ──────────────────── */
:root {
  /* Button — 7 styles × Default / onTap / Loading / Disabled, 2 sizes */
  --btn-height:         60px;  /* Standart */
  --btn-height-compact: 48px;  /* Compact */
  --btn-width:          312px; /* full width = 360 frame − 2 × 24 */
  --btn-radius:         var(--radius-btn);
  --btn-font:           600 16px/24px var(--font-body);
  --btn-subtitle-font:  500 12px/16px var(--font-body);
  --btn-ontap-opacity:  0.7;
  --btn-primary-bg:          #876DEE;                 --btn-primary-fg:          rgb(255 255 255 / 0.9);
  --btn-secondary-bg:        #D6D2E2;                 --btn-secondary-fg:        #624DB7;
  --btn-tertiary-bg:         rgb(255 255 255 / 0.15); --btn-tertiary-fg:         rgb(255 255 255 / 0.9); /* on dark bg */
  --btn-ghost-bg:            transparent;             --btn-ghost-fg:            #876DEE;
  --btn-danger-bg:           #FD547E;                 --btn-danger-fg:           rgb(255 255 255 / 0.9);
  --btn-danger-secondary-bg: rgb(253 84 126 / 0.15);  --btn-danger-secondary-fg: #FD547E;
  --btn-custom-bg:           #F4AC20;                 --btn-custom-fg:           rgb(255 255 255 / 0.9);
  --btn-disabled-bg:         #D6D2E2;                 --btn-disabled-fg:         #FFFFFF; /* Primary + Secondary */
  --btn-disabled-fg-opacity: 0.35; /* other styles keep bg, label 15–50 % */
  --btn-social-bg:  color-mix(in oklab, #8983AA 65%, white); /* measured ≈ #B0ACCD */
  --btn-social-fg:  #FFFFFF;
  --btn-apple-bg:   #000000;
  --btn-module-padding: 24px;

  /* Shared dark field fill used by Label, dark Text input, Amount field, dark Tooltip (measured) */
  --cmp-dark-fill: #1D193D;

  /* Chips */
  --chip-height: 28px; --chip-radius: var(--radius-sm); --chip-pad-x: 8px; --chip-gap: 4px;
  --chip-font: 600 12px/16px var(--font-body);
  --chip-primary-bg: var(--brand-primary); --chip-primary-fg: #FFFFFF;
  --chip-secondary-bg: color-mix(in oklab, var(--brand-primary) 10%, var(--background-primary)); --chip-secondary-fg: var(--muted);

  /* Label (custom name on a card cover) */
  --label-bg: var(--cmp-dark-fill); --label-fg: #FFFFFF; --label-pad: 4px 8px; --label-font: var(--type-label-xxsmall-bold);

  /* Search field */
  --search-height: 44px; --search-radius: var(--radius-md);
  --search-bg: color-mix(in oklab, var(--brand-primary) 11%, var(--background-primary)); /* measured ≈ #F1EDFC */

  /* Shortcut button (on dark screens) */
  --shortcut-height: 28px; --shortcut-radius: var(--radius-sm); --shortcut-bg: rgb(255 255 255 / 0.15); --shortcut-fg: #FFFFFF;

  /* Nav bar */
  --navbar-top-height: 44px; --navbar-title-max: 19ch; --navbar-desc-max: 44ch;
  --stepper-track: rgb(255 255 255 / 0.9); --stepper-active: var(--brand-primary);

  /* Segmented control (text tabs) */
  --seg-height: 44px; --seg-pad-x: 12px; --seg-fade-width: 32px;
  --seg-font: 600 14px/18px var(--font-body);

  /* Tab bar (floating) */
  --tabbar-width: var(--navbar-width); --tabbar-height: var(--navbar-height); --tabbar-radius: var(--radius-navbar);
  --tabbar-icon: var(--brand-primary); --tabbar-icon-active: #FFFFFF; --tabbar-badge: var(--error);

  /* Cell */
  --cell-min-height: 56px; --cell-media: 48px; --cell-media-radius: var(--radius-sm); --cell-gap: 12px;
  --status-completed-bg: var(--accent-green-15);  --status-completed-fg: color-mix(in oklab, var(--success), black 35%);
  --status-processing-bg: var(--accent-orange-15); --status-processing-fg: color-mix(in oklab, var(--warning), black 20%);
  --status-failed-bg: var(--accent-red-15);        --status-failed-fg: var(--error);

  /* Text inputs (Dark + Light themes) */
  --input-height: 56px; --input-radius: var(--radius-md); --input-pad-x: 16px;
  --input-dark-bg: var(--cmp-dark-fill); --input-dark-fg: #FFFFFF;
  --input-light-bg: #FFFFFF; --input-light-fg: #000000; --input-light-border: color-mix(in oklab, #8983AA 30%, white);
  --input-focus-border: var(--brand-primary); --input-error-border: var(--error);

  /* Amount field */
  --amount-radius: var(--radius-sm); --amount-bg: var(--cmp-dark-fill);
  --amount-border: color-mix(in oklab, white 14%, var(--cmp-dark-fill)); /* measured ≈ #373A4F */

  /* Bottom sheet (modal) */
  --bottom-sheet-radius: 24px; /* measured from renders */
  --bottom-sheet-media: 128px;
  --scrim: rgb(4 4 17 / 0.45);

  /* Toast */
  --toast-radius: var(--radius-lg); --toast-pad: 16px; --toast-bg: #FFFFFF; --toast-fg: #000000;
  --toast-error-bg: var(--error); --toast-error-fg: #FFFFFF;
  --toast-life-short: 2s; --toast-life-long: 6s;

  /* Tooltip */
  --tooltip-max: 234px; --tooltip-min: 100px; --tooltip-pad: 12px; --tooltip-radius: var(--radius-sm);
  --tooltip-dark-bg: var(--cmp-dark-fill); --tooltip-accent-bg: var(--brand-primary); --tooltip-fg: #FFFFFF;

  /* Card */
  --card-radius: var(--radius-card); --card-tap-scale: 0.97; --card-tap-duration: 100ms;
  --card-loading-bg: color-mix(in oklab, #8983AA 85%, white);

  /* Banners */
  --banner-radius: var(--radius-lg); --banner-pad: 16px;
  --banner-dark-bg: var(--cmp-dark-fill);
  --banner-warning-bg: color-mix(in oklab, var(--warning) 15%, var(--banner-tint-mix));
  --banner-success-bg: color-mix(in oklab, var(--success) 20%, var(--banner-tint-mix));
  --banner-error-bg:   color-mix(in oklab, var(--error) 15%, var(--banner-tint-mix));
  --banner-solid-bg:   var(--warning);
  --banner-tint-mix:   var(--background-primary); /* tints follow the theme */
}

/* ── Type utility classes (one per Figma text style) ────────────────── */
.t-heading-megalarge  { font: var(--type-heading-megalarge);  letter-spacing: var(--track-heading-megalarge); }
.t-heading-xxlarge    { font: var(--type-heading-xxlarge);    letter-spacing: var(--track-heading-xxlarge); }
.t-heading-xlarge     { font: var(--type-heading-xlarge);     letter-spacing: var(--track-heading-xlarge); }
.t-heading-large      { font: var(--type-heading-large);      letter-spacing: var(--track-heading-large); }
.t-heading-medium     { font: var(--type-heading-medium);     letter-spacing: var(--track-heading-medium); }
.t-heading-small      { font: var(--type-heading-small);      letter-spacing: var(--track-heading-small); }
.t-heading-xsmall     { font: var(--type-heading-xsmall);     letter-spacing: var(--track-heading-xsmall); }
.t-input-xlarge       { font: var(--type-input-xlarge);       letter-spacing: var(--track-input-xlarge); }
.t-input-large        { font: var(--type-input-large);        letter-spacing: var(--track-input-large); }
.t-input-medium       { font: var(--type-input-medium);       letter-spacing: var(--track-input-medium); }
.t-body-large         { font: var(--type-body-large);         letter-spacing: var(--track-body-large); }
.t-body-medium        { font: var(--type-body-medium);        letter-spacing: var(--track-body-medium); }
.t-body-small         { font: var(--type-body-small);         letter-spacing: var(--track-body-small); }
.t-body-xsmall        { font: var(--type-body-xsmall);        letter-spacing: var(--track-body-xsmall); }
.t-paragraph-large    { font: var(--type-paragraph-large);    letter-spacing: var(--track-paragraph-large); }
.t-paragraph-medium   { font: var(--type-paragraph-medium);   letter-spacing: var(--track-paragraph-medium); }
.t-paragraph-small    { font: var(--type-paragraph-small);    letter-spacing: var(--track-paragraph-small); }
.t-paragraph-xsmall   { font: var(--type-paragraph-xsmall);   letter-spacing: var(--track-paragraph-xsmall); }
.t-label-large        { font: var(--type-label-large);        letter-spacing: var(--track-label-large); }
.t-label-medium       { font: var(--type-label-medium);       letter-spacing: var(--track-label-medium); }
.t-label-xsmall       { font: var(--type-label-xsmall);       letter-spacing: var(--track-label-xsmall); }
.t-label-xsmall-caps  { font: var(--type-label-xsmall-caps);  letter-spacing: var(--track-label-xsmall-caps); text-transform: uppercase; }
.t-label-xxsmall      { font: var(--type-label-xxsmall);      letter-spacing: var(--track-label-xxsmall); }
.t-label-xxsmall-bold { font: var(--type-label-xxsmall-bold); letter-spacing: var(--track-label-xxsmall-bold); }