/* Simon Jorite — tokens. Généré par build.py depuis tokens.json : ne pas modifier à la main. */



@font-face {
  font-family: "Fraunces Soft";
  src: url("fonts/fraunces-soft.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces Soft";
  src: url("fonts/fraunces-soft-italic.woff2") format("woff2");
  font-weight: 500 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}



:root {
  --bg: #F6F6F4;
  --surface: #FFFFFF;
  --surface-alt: #ECECE8;
  --surface-hover: #F0F0EC;
  --inverse: #1C2433;
  --ink: #1C2433;
  --ink-muted: #5B6577;
  --ink-disabled: #8C929C;
  --on-inverse: #F6F6F4;
  --on-inverse-muted: #C9CED8;
  --line: #D8D8D2;
  --line-soft: #E6E6E1;
  --line-strong: #7E8592;
  --line-inverse: #3A4458;
  --accent: #C42A5A;
  --accent-hover: #A8224C;
  --accent-active: #8F1C40;
  --accent-soft: #F9E6EC;
  --on-accent: #FFFFFF;
  --accent-on-inverse: #F07A9C;
  --accent-hover-on-inverse: #F599B3;
  --on-accent-inverse: #1C2433;
  --link: var(--accent);
  --focus: #C42A5A;
  --success: #0A6F61;
  --success-soft: #E3F4F0;
  --error: #B42318;
  --error-soft: #FCE8E6;
  --error-hover: #961C13;
  --on-error: #FFFFFF;
  --warning: #8A5A00;
  --warning-soft: #FDF1DA;
  --info: #2459B8;
  --info-soft: #E6EEFB;
  --disabled-bg: #ECECE8;
  --scrim: #1C243399;
  --skeleton: #E4E4DF;
  --shadow-1: 0 1px 2px #1c24330d, 0 3px 8px #1c243314;
  --shadow-2: 0 2px 4px #1c24330f, 0 8px 20px #1c24331f;
  --shadow-3: 0 4px 12px #1c24331a, 0 20px 48px -8px #1c243347;
  --focus-ring: 0 0 0 2px #f6f6f4, 0 0 0 4px #c42a5a;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --border-hairline: 1px;
  --border-control: 1.5px;
  --border-focus: 2px;
  --container: 1152px;
  --container-wide: 1312px;
  --measure: 68ch;
  --measure-lead: 36ch;
  --page-margin-sm: 16px;
  --page-margin-md: 32px;
  --page-margin-lg: 64px;
  --grid-gap-sm: 16px;
  --grid-gap-md: 24px;
  --grid-gap-lg: 32px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --icon-16: 16px;
  --icon-20: 20px;
  --icon-24: 24px;
  --icon-32: 32px;
  --icon-stroke: 1.5;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-flow: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --font-display: "Fraunces Soft", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C2433;
    --surface: #252F42;
    --surface-alt: #212A3B;
    --surface-hover: #2C374C;
    --inverse: #111722;
    --ink: #F6F6F4;
    --ink-muted: #AEB6C4;
    --ink-disabled: #6E7890;
    --on-inverse: #F6F6F4;
    --on-inverse-muted: #C9CED8;
    --line: #3A4458;
    --line-soft: #2E3748;
    --line-strong: #6E7890;
    --line-inverse: #2E3748;
    --accent: #F07A9C;
    --accent-hover: #F599B3;
    --accent-active: #F8B3C7;
    --accent-soft: #3D2133;
    --on-accent: #1C2433;
    --accent-on-inverse: #F07A9C;
    --accent-hover-on-inverse: #F599B3;
    --on-accent-inverse: #1C2433;
    --link: var(--accent);
    --focus: #F07A9C;
    --success: #4CC9B4;
    --success-soft: #12332F;
    --error: #FF8A7A;
    --error-soft: #3D1A17;
    --error-hover: #FFA79B;
    --on-error: #1C2433;
    --warning: #F2B84B;
    --warning-soft: #3A2C0E;
    --info: #8DB4FF;
    --info-soft: #1A2B4D;
    --disabled-bg: #2A3344;
    --scrim: #0A0E16B3;
    --skeleton: #313C52;
    --shadow-1: 0 1px 2px #00000059, 0 3px 8px #00000040;
    --shadow-2: 0 2px 4px #00000066, 0 8px 20px #00000080;
    --shadow-3: 0 4px 12px #00000080, 0 20px 48px -8px #000000b3;
    --focus-ring: 0 0 0 2px #1c2433, 0 0 0 4px #f07a9c;
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --bg: #1C2433;
  --surface: #252F42;
  --surface-alt: #212A3B;
  --surface-hover: #2C374C;
  --inverse: #111722;
  --ink: #F6F6F4;
  --ink-muted: #AEB6C4;
  --ink-disabled: #6E7890;
  --on-inverse: #F6F6F4;
  --on-inverse-muted: #C9CED8;
  --line: #3A4458;
  --line-soft: #2E3748;
  --line-strong: #6E7890;
  --line-inverse: #2E3748;
  --accent: #F07A9C;
  --accent-hover: #F599B3;
  --accent-active: #F8B3C7;
  --accent-soft: #3D2133;
  --on-accent: #1C2433;
  --accent-on-inverse: #F07A9C;
  --accent-hover-on-inverse: #F599B3;
  --on-accent-inverse: #1C2433;
  --link: var(--accent);
  --focus: #F07A9C;
  --success: #4CC9B4;
  --success-soft: #12332F;
  --error: #FF8A7A;
  --error-soft: #3D1A17;
  --error-hover: #FFA79B;
  --on-error: #1C2433;
  --warning: #F2B84B;
  --warning-soft: #3A2C0E;
  --info: #8DB4FF;
  --info-soft: #1A2B4D;
  --disabled-bg: #2A3344;
  --scrim: #0A0E16B3;
  --skeleton: #313C52;
  --shadow-1: 0 1px 2px #00000059, 0 3px 8px #00000040;
  --shadow-2: 0 2px 4px #00000066, 0 8px 20px #00000080;
  --shadow-3: 0 4px 12px #00000080, 0 20px 48px -8px #000000b3;
  --focus-ring: 0 0 0 2px #1c2433, 0 0 0 4px #f07a9c;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #F6F6F4;
  --surface: #FFFFFF;
  --surface-alt: #ECECE8;
  --surface-hover: #F0F0EC;
  --inverse: #1C2433;
  --ink: #1C2433;
  --ink-muted: #5B6577;
  --ink-disabled: #8C929C;
  --on-inverse: #F6F6F4;
  --on-inverse-muted: #C9CED8;
  --line: #D8D8D2;
  --line-soft: #E6E6E1;
  --line-strong: #7E8592;
  --line-inverse: #3A4458;
  --accent: #C42A5A;
  --accent-hover: #A8224C;
  --accent-active: #8F1C40;
  --accent-soft: #F9E6EC;
  --on-accent: #FFFFFF;
  --accent-on-inverse: #F07A9C;
  --accent-hover-on-inverse: #F599B3;
  --on-accent-inverse: #1C2433;
  --link: var(--accent);
  --focus: #C42A5A;
  --success: #0A6F61;
  --success-soft: #E3F4F0;
  --error: #B42318;
  --error-soft: #FCE8E6;
  --error-hover: #961C13;
  --on-error: #FFFFFF;
  --warning: #8A5A00;
  --warning-soft: #FDF1DA;
  --info: #2459B8;
  --info-soft: #E6EEFB;
  --disabled-bg: #ECECE8;
  --scrim: #1C243399;
  --skeleton: #E4E4DF;
  --shadow-1: 0 1px 2px #1c24330d, 0 3px 8px #1c243314;
  --shadow-2: 0 2px 4px #1c24330f, 0 8px 20px #1c24331f;
  --shadow-3: 0 4px 12px #1c24331a, 0 20px 48px -8px #1c243347;
  --focus-ring: 0 0 0 2px #f6f6f4, 0 0 0 4px #c42a5a;
  color-scheme: light;
}
