/* Generated by `node build-tokens.mjs --choices`. Every shape, palette and motion as a rule for gallery.html; the base is the default (navy, square). */

:root[data-shape="app"] {
  --heading-weight: 700;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --mark-radius: 12px;
  --sh-1: 0 0 0 0 transparent;
  --sh-2: 0 8px 24px rgba(15, 23, 42, 0.08);
  --sh-sheet: 0 -12px 40px rgba(15, 23, 42, 0.16);
  --sh-brand: 0 8px 20px color-mix(in srgb, var(--primary) 28%, transparent);
}

:root[data-shape="round"] {
  --heading-weight: 600;
  --radius: 24px;
  --radius-sm: 8px;
  --mark-radius: 12px;
  --radius-lg: 32px;
  --sh-1: 0 6px 12px -6px rgba(28, 34, 48, 0.1);
  --sh-2: 0 12px 24px -12px rgba(28, 34, 48, 0.16);
  --sh-3: 0 32px 64px -16px rgba(28, 34, 48, 0.28);
}

:root[data-shape="square"] {
  --radius: 6px;
  --mark-radius: 6px;
  --radius-lg: 10px;
  --sh-1: 0 1px 2px rgba(28, 34, 48, 0.06);
  --sh-2: 0 2px 6px rgba(28, 34, 48, 0.08), 0 1px 2px rgba(28, 34, 48, 0.06);
  --sh-3: 0 18px 44px rgba(28, 34, 48, 0.2), 0 4px 10px rgba(28, 34, 48, 0.08);
}

:root[data-palette="app-indigo"] {
  --bg: #FFFFFF;
  --surface-hover: #F1F5F9;
  --surface-2: #F8FAFC;
  --sunk: #E2E8F0;
  --scrim: rgba(15, 23, 42, 0.5);
  --panel-border: #E2E8F0;
  --text: #0F172A;
  --muted: #475569;
  --heading: #0F172A;
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --primary-tint: #E0E7FF;
  --primary-tint-line: #C7D2FE;
  --on-primary-tint: #3730A3;
  --link: #4338CA;
  --field-border: #64748B;
  --field-border-hover: #334155;
  --focus: #6366F1;
  --notice-bg: #EEF2FF;
  --notice-border: #4F46E5;
  --danger: #B91C1C;
  --danger-bg: #FEE2E2;
  --danger-hover: #991B1B;
  --danger-line: #FCA5A5;
  --ok: #166534;
  --ok-bg: #DCFCE7;
  --ok-line: #86EFAC;
  --warn: #92400E;
  --warn-bg: #FEF3C7;
  --warn-line: #FCD34D;
  --info: #1D4ED8;
  --info-bg: #DBEAFE;
  --info-line: #93C5FD;
  --mark-bg: #4F46E5;
  --header-fg: #0F172A;
  --header-muted: #475569;
  --header-border: 1px solid #E2E8F0;
  --header-mark-bg: #4F46E5;
  --header-button-border: #64748B;
  --header-button-hover: #F1F5F9;
  --header-focus: #6366F1;
}

:root[data-palette="app-teal"] {
  --bg: #FFFFFF;
  --surface-hover: #F1F5F9;
  --surface-2: #F8FAFC;
  --sunk: #E2E8F0;
  --scrim: rgba(15, 23, 42, 0.5);
  --panel-border: #E2E8F0;
  --text: #0F172A;
  --muted: #475569;
  --heading: #0F172A;
  --primary: #0F766E;
  --primary-hover: #115E59;
  --primary-tint: #CCFBF1;
  --primary-tint-line: #99F6E4;
  --on-primary-tint: #115E59;
  --link: #0F766E;
  --field-border: #64748B;
  --field-border-hover: #334155;
  --focus: #0D9488;
  --notice-bg: #F0FDFA;
  --notice-border: #0F766E;
  --danger: #B91C1C;
  --danger-bg: #FEE2E2;
  --danger-hover: #991B1B;
  --danger-line: #FCA5A5;
  --ok: #166534;
  --ok-bg: #DCFCE7;
  --ok-line: #86EFAC;
  --warn: #92400E;
  --warn-bg: #FEF3C7;
  --warn-line: #FCD34D;
  --info: #1D4ED8;
  --info-bg: #DBEAFE;
  --info-line: #93C5FD;
  --mark-bg: #0F766E;
  --header-fg: #0F172A;
  --header-muted: #475569;
  --header-border: 1px solid #E2E8F0;
  --header-mark-bg: #0F766E;
  --header-button-border: #64748B;
  --header-button-hover: #F1F5F9;
  --header-focus: #0D9488;
}

:root[data-palette="green"] {
  --bg: #F3F5F1;
  --surface-hover: #EDF1EB;
  --panel-border: #D2DAD4;
  --text: #18211C;
  --muted: #4A574F;
  --heading: #122A21;
  --primary: #1B4D3E;
  --primary-hover: #133A2F;
  --link: #1B4D3E;
  --field-border: #75827A;
  --field-border-hover: #3F4C44;
  --notice-bg: #E8F0EA;
  --notice-border: #1B4D3E;
  --focus: #B86E00;
  --mark-bg: #1B4D3E;
  --header-bg: #1B4D3E;
  --header-fg: #FFFFFF;
  --header-muted: #C9DDD3;
  --header-border: 0;
  --header-mark-bg: #FFFFFF;
  --header-mark-fg: #1B4D3E;
  --header-button-border: rgba(255, 255, 255, 0.6);
  --header-button-hover: rgba(255, 255, 255, 0.12);
  --header-focus: #F2C14E;
  --surface-2: #F7F9F6;
  --sunk: #E8ECE6;
}

:root[data-palette="navy"] {
  --bg: #F4F5F7;
  --surface-hover: #EEF0F3;
  --panel-border: #D9DDE3;
  --text: #1C2230;
  --muted: #4B5466;
  --heading: #1C2230;
  --primary: #334E7A;
  --primary-hover: #283E62;
  --link: #2E4A78;
  --field-border: #7B8494;
  --field-border-hover: #4B5466;
  --notice-bg: #EDF1F7;
  --notice-border: #334E7A;
  --focus: #1D5FD1;
  --mark-bg: transparent;
  --mark-fg: #4B5466;
  --header-fg: #1C2230;
  --header-muted: #4B5466;
  --header-border: 1px solid #D9DDE3;
  --header-mark-bg: transparent;
  --header-mark-fg: #4B5466;
  --header-button-border: #7B8494;
  --header-button-hover: #EEF0F3;
  --header-focus: #1D5FD1;
  --surface-2: #F9FAFB;
  --sunk: #ECEFF3;
}

:root[data-palette="teal"] {
  --bg: #F8FAFC;
  --surface-hover: #F1F5F9;
  --panel-border: #E2E8F0;
  --text: #0F172A;
  --muted: #475569;
  --heading: #0F172A;
  --primary: #0F766E;
  --primary-hover: #115E59;
  --link: #0F766E;
  --field-border: #64748B;
  --field-border-hover: #334155;
  --notice-bg: #F0FDFA;
  --notice-border: #0F766E;
  --focus: #0D9488;
  --mark-bg: #0F766E;
  --header-fg: #0F172A;
  --header-muted: #475569;
  --header-border: 1px solid #E2E8F0;
  --header-mark-bg: #0F766E;
  --header-button-border: #64748B;
  --header-button-hover: #F1F5F9;
  --header-focus: #0D9488;
  --surface-2: #F1F5F9;
  --sunk: #E2E8F0;
}

:root[data-palette="vibe"] {
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --surface-hover: #F0F0F2;
  --surface-2: #F6F7FB;
  --sunk: #E7E9EF;
  --scrim: rgba(41, 47, 76, 0.7);
  --panel-border: #D0D4E4;
  --text: #323338;
  --muted: #676879;
  --heading: #323338;
  --primary: #0073EA;
  --primary-hover: #0060B9;
  --on-primary: #FFFFFF;
  --link: #1B6FB8;
  --field-border: #80839A;
  --field-border-hover: #676879;
  --focus: #0073EA;
  --notice-bg: #F0F7FF;
  --notice-border: #0073EA;
  --danger: #B63546;
  --danger-bg: #FDEEF0;
  --danger-hover: #962A38;
  --danger-line: #F4C3CB;
  --on-danger: #FFFFFF;
  --ok: #007038;
  --ok-bg: #E6F4EC;
  --ok-line: #BBDBC9;
  --warn: #8A5700;
  --warn-bg: #FFF4CC;
  --warn-line: #FFE580;
  --info: #0060B9;
  --info-bg: #E6F1FF;
  --info-line: #CCE5FF;
  --mark-bg: #0073EA;
  --mark-fg: #FFFFFF;
  --header-bg: #FFFFFF;
  --header-fg: #323338;
  --header-muted: #676879;
  --header-border: 1px solid #D0D4E4;
  --header-mark-bg: #0073EA;
  --header-mark-fg: #FFFFFF;
  --header-button-border: #80839A;
  --header-button-hover: #F0F0F2;
  --header-focus: #0073EA;
}

:root[data-motion="kit"] {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
}