/* Graphite tokens. Default theme is dark; light follows [data-theme=light] or the light preference. */
:root{
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;

  --type-title:500 20px/28px var(--font);
  --type-heading:500 16px/24px var(--font);
  --type-label:500 14px/20px var(--font);
  --type-body:400 14px/20px var(--font);
  --type-small:400 13px/18px var(--font);
  --type-micro:500 12px/16px var(--font);
  --type-stat:500 24px/32px var(--font);
  --type-field:var(--type-body);
  --type-code:400 12px/16px var(--font-mono);
  --tracking-tight:-0.011em;
  --tracking-title:-0.018em;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:20px;--space-6:24px;--space-7:32px;--space-8:48px;
  --space-half:2px;--space-tight:6px;

  --card-pad:14px;
  --card-gap:20px;
  --bw:1px;
  --ring:2px;
  --mark:6px;
  --icon:16px;
  --icon-sm:14px;
  --logo:16px;
  --logo-tile:24px;
  --avatar:24px;
  --avatar-lg:32px;
  --check:16px;
  --switch-w:28px;
  --switch-h:16px;
  --switch-knob:12px;
  --switch-travel:12px;
  --kbd-h:20px;
  --chart-h:220px;
  --bar-max:28px;
  --detail-w:440px;
  --list-w:420px;
  --dialog-w:440px;
  --command-w:560px;
  --sheet-w:400px;
  --menu-w:200px;
  --tooltip-w:240px;
  --toast-w:360px;
  --field-w:280px;
  --detail-label:128px;
  --auth-w:360px;
  --step:20px;
  --track:4px;
  --thumb:14px;
  --code-h:240px;
  --icon-stroke:1.5;
  --scrim-pad:32px;

  --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:10px;--r-xl:12px;--r-full:999px;

  --sidebar-w:240px;
  --topbar-h:48px;
  --row-h:40px;
  --nav-h:30px;
  --control-h:32px;
  --control-h-sm:28px;
  --control-h-lg:36px;
  --content-max:1200px;
  --content-narrow:880px;
  --gutter:24px;

  --t-fast:120ms;--t-base:160ms;--t-layer:180ms;--t-pulse:1400ms;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

:root,:root:not([data-theme=light]),[data-theme=dark]{
  color-scheme:dark;
  --bg:#1A1A1A;
  --surface:#212121;
  --surface-2:#292929;
  --hover:#252525;
  --raised:#2E2E2E;
  --field:#1C1C1C;
  --seg-bg:#1A1A1A;
  --pressed:#333333;
  --line:rgba(255,255,255,.05);
  --line-strong:rgba(255,255,255,.10);
  --control-line:#6E6E6E;
  --text:#EEEEEE;
  --text-2:#A3A3A3;
  --text-3:#949494;
  --accent:#EEEEEE;
  --accent-hover:#FFFFFF;
  --accent-subtle:#292929;
  --on-accent:#1A1A1A;
  --focus:0 0 0 3px rgba(238,238,238,.16);
  --focus-line:rgba(238,238,238,.56);
  --ok:#3DD68C;--ok-bg:rgba(61,214,140,.12);
  --warn:#FFB224;--warn-bg:rgba(255,178,36,.12);
  --bad:#FF6369;--bad-bg:rgba(255,99,105,.12);--bad-line:rgba(255,99,105,.28);
  --info:#70B8FF;--info-bg:rgba(112,184,255,.12);
  --idle:#6E6E6E;
  --scrim:rgba(0,0,0,.6);
  --shadow-float:0 0 0 1px rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.48);
  --shadow-knob:0 1px 2px rgba(0,0,0,.4);
  --chart-1:#A8A8A8;
  --chart-2:#FF6369;
  --chart-3:#6E6E6E;
  --chart-4:#474747;
  --chart-5:#3DD68C;
  --chart-grid:rgba(255,255,255,.08);
  --chart-axis:#949494;
  --brand-mono:#EEEEEE;
  --brand-hubspot:#FF7A59;
  --brand-slack:#E01E5A;
  --brand-salesforce:#00A1E0;
  --brand-gmail:#EA4335;
  --brand-intercom:#1F8DED;
  --brand-snowflake:#29B5E8;
  --brand-sheets:#34A853;
  --brand-stripe:#635BFF;
  --brand-google:#4285F4;
  --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.2 2.6 2.6L12 5.4' fill='none' stroke='%231A1A1A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m5 6.5 3 3 3-3' stroke='%23949494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme=light]{
  color-scheme:light;
  --bg:#F7F7F7;
  --surface:#FFFFFF;
  --surface-2:#F0F0F0;
  --hover:#F5F5F5;
  --raised:#EBEBEB;
  --field:#FFFFFF;
  --seg-bg:#F0F0F0;
  --pressed:#FFFFFF;
  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.14);
  --control-line:#8F8F8F;
  --text:#171717;
  --text-2:#5E5E5E;
  --text-3:#6B6B6B;
  --accent:#171717;
  --accent-hover:#2E2E2E;
  --accent-subtle:#F0F0F0;
  --on-accent:#FFFFFF;
  --focus:0 0 0 3px rgba(23,23,23,.12);
  --focus-line:rgba(23,23,23,.6);
  --ok:#18794E;--ok-bg:rgba(24,121,78,.1);
  --warn:#AD5700;--warn-bg:rgba(173,87,0,.1);
  --bad:#CD2B31;--bad-bg:rgba(205,43,49,.08);--bad-line:rgba(205,43,49,.3);
  --info:#0D74CE;--info-bg:rgba(13,116,206,.1);
  --idle:#A3A3A3;
  --scrim:rgba(0,0,0,.32);
  --shadow-float:0 0 0 1px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.12);
  --shadow-knob:0 1px 2px rgba(0,0,0,.2);
  --chart-1:#8A8A8A;
  --chart-2:#CD2B31;
  --chart-3:#A3A3A3;
  --chart-4:#D4D4D4;
  --chart-5:#18794E;
  --chart-grid:rgba(0,0,0,.07);
  --chart-axis:#6B6B6B;
  --brand-mono:#171717;
  --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.2 2.6 2.6L12 5.4' fill='none' stroke='%23FFFFFF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m5 6.5 3 3 3-3' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme:light){
  :root:not([data-theme=dark]){
    color-scheme:light;
    --bg:#F7F7F7;
    --surface:#FFFFFF;
    --surface-2:#F0F0F0;
    --hover:#F5F5F5;
    --raised:#EBEBEB;
    --field:#FFFFFF;
    --seg-bg:#F0F0F0;
    --pressed:#FFFFFF;
    --line:rgba(0,0,0,.08);
    --line-strong:rgba(0,0,0,.14);
  --control-line:#8F8F8F;
    --text:#171717;
    --text-2:#5E5E5E;
    --text-3:#6B6B6B;
    --accent:#171717;
    --accent-hover:#2E2E2E;
    --accent-subtle:#F0F0F0;
    --on-accent:#FFFFFF;
    --focus:0 0 0 3px rgba(23,23,23,.12);
    --focus-line:rgba(23,23,23,.6);
    --ok:#18794E;--ok-bg:rgba(24,121,78,.1);
    --warn:#AD5700;--warn-bg:rgba(173,87,0,.1);
    --bad:#CD2B31;--bad-bg:rgba(205,43,49,.08);--bad-line:rgba(205,43,49,.3);
    --info:#0D74CE;--info-bg:rgba(13,116,206,.1);
    --idle:#A3A3A3;
    --scrim:rgba(0,0,0,.32);
    --shadow-float:0 0 0 1px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.12);
    --shadow-knob:0 1px 2px rgba(0,0,0,.2);
    --chart-1:#8A8A8A;
    --chart-2:#CD2B31;
    --chart-3:#A3A3A3;
    --chart-4:#D4D4D4;
    --chart-5:#18794E;
    --chart-grid:rgba(0,0,0,.07);
    --chart-axis:#6B6B6B;
    --brand-mono:#171717;
    --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.2 2.6 2.6L12 5.4' fill='none' stroke='%23FFFFFF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m5 6.5 3 3 3-3' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

@media (max-width:600px){
  :root{
    --control-h:44px;
    --control-h-sm:44px;
    --control-h-lg:44px;
    --nav-h:44px;
    --row-h:52px;
    --type-field:400 16px/20px var(--font);
    --gutter:16px;
  }
}