/* psn-goadedokun brand tokens : J01/G1000 token set, 2026-05-21, v0.5.0-J01-tokens.
   Token blocks generated from design-tokens.json. Light mode in :root; dark mode via
   [data-theme="dark"] with a prefers-color-scheme fallback.
   The @font-face block below was hand-added at K01 (Session J, 2026-05-22): the brand
   kit ships local woff2 subsets instead of the Google Fonts CDN @import. Font files
   resolve from ./fonts/ relative to this stylesheet. Token blocks: do not edit by hand. */

/* --- webfonts: local woff2 subsets (latin), K01 Session J 2026-05-22.
   EB Garamond and Source Sans 3 are variable fonts: one woff2 per family
   covers the weight range via a font-weight range descriptor. IBM Plex Mono
   ships as discrete static weights. --- */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/eb-garamond.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("./fonts/eb-garamond-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/source-sans-3.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("./fonts/source-sans-3-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  /* --- colour primitives --- */
  --color-neutral-0: #FBF9F1;
  --color-neutral-50: #F1ECDC;
  --color-neutral-100: #E5E3DF;
  --color-neutral-200: #C9C8C5;
  --color-neutral-400: #969492;
  --color-neutral-600: #646361;
  --color-neutral-800: #3D3C3A;
  --color-neutral-950: #231F18;
  --color-primary-300: #F2F4F8;
  --color-primary-400: #9BABCE;
  --color-primary-500: #4362A4;
  --color-primary-600: #1A2A4C;
  --color-primary-700: #17233E;
  --color-primary-800: #131D31;
  --color-primary-900: #0F1624;
  --color-secondary-300: #F8F2F1;
  --color-secondary-400: #DDB4AE;
  --color-secondary-500: #CB6F61;
  --color-secondary-600: #A33A2A;
  --color-secondary-700: #772D22;
  --color-secondary-800: #4E2019;
  --color-secondary-900: #26100D;
  --color-accent-300: #F7F6F2;
  --color-accent-400: #CEBE9C;
  --color-accent-500: #A88742;
  --color-accent-600: #64512B;
  --color-accent-700: #231D10;
  --color-success-100: #F2F8F5;
  --color-success-300: #82CAA6;
  --color-success-500: #2A8457;
  --color-success-700: #1E5338;
  --color-success-900: #0F241A;
  --color-warning-100: #F9F6F1;
  --color-warning-300: #DDC08D;
  --color-warning-500: #C78B23;
  --color-warning-700: #75531A;
  --color-warning-900: #281D0B;
  --color-error-100: #F8F2F1;
  --color-error-300: #D99994;
  --color-error-500: #C23A2E;
  --color-error-700: #722720;
  --color-error-900: #260F0D;
  --color-info-100: #F2F5F8;
  --color-info-300: #92B0D3;
  --color-info-500: #326CAE;
  --color-info-700: #224367;
  --color-info-900: #0E1925;
  --color-dataviz-cat-1: #2B4F97;
  --color-dataviz-cat-2: #C73868;
  --color-dataviz-cat-3: #5BAF31;
  --color-dataviz-cat-4: #AC60D2;
  --color-dataviz-cat-5: #C99B40;
  --color-dataviz-cat-6: #2FA77F;
  --color-dataviz-seq-1: #E2E8F3;
  --color-dataviz-seq-2: #B6C5E2;
  --color-dataviz-seq-3: #859ED1;
  --color-dataviz-seq-4: #5378C0;
  --color-dataviz-seq-5: #385A9F;
  --color-dataviz-seq-6: #284276;
  --color-dataviz-seq-7: #1B2F55;
  --color-dataviz-div-1: #C6542F;
  --color-dataviz-div-2: #E5E3DF;
  --color-dataviz-div-3: #1A2A4C;

  /* --- semantic colour (light) --- */
  --color-brand-primary: var(--color-primary-600);
  --color-brand-secondary: var(--color-secondary-600);
  --color-brand-accent: var(--color-accent-500);
  --color-brand-accent-text: var(--color-accent-600);
  --color-brand-mark: var(--color-primary-600);
  --color-bg-page: var(--color-neutral-50);
  --color-bg-card: var(--color-neutral-0);
  --color-bg-subtle: var(--color-neutral-100);
  --color-bg-inverse: var(--color-neutral-950);
  --color-text-heading: var(--color-neutral-950);
  --color-text-body: var(--color-neutral-950);
  --color-text-secondary: var(--color-neutral-800);
  --color-text-muted: var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-50);
  --color-text-link: var(--color-primary-600);
  --color-text-on-primary: var(--color-neutral-50);
  --color-text-on-accent: var(--color-neutral-950);
  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-400);
  --color-border-subtle: var(--color-neutral-100);
  --color-border-focus: var(--color-primary-500);
  --color-feedback-success: var(--color-success-500);
  --color-feedback-warning: var(--color-warning-500);
  --color-feedback-error: var(--color-error-500);
  --color-feedback-info: var(--color-info-500);

  /* --- typography --- */
  --font-display: "EB Garamond", "Iowan Old Style", "Garamond", "Times New Roman", serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Consolas", "Menlo", monospace;
  --font-size-display: 6rem;
  --font-size-hero: 4rem;
  --font-size-title: 3rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-body-large: 1.375rem;
  --font-size-body: 1.125rem;
  --font-size-body-default: 1rem;
  --font-size-caption: 0.875rem;
  --font-size-micro: 0.75rem;
  --font-size-section-label: 0.875rem;
  --line-height-display: 1.02;
  --line-height-hero: 1.05;
  --line-height-title: 1.1;
  --line-height-h2: 1.2;
  --line-height-h3: 1.25;
  --line-height-h4: 1.35;
  --line-height-body-large: 1.5;
  --line-height-body: 1.55;
  --line-height-body-default: 1.55;
  --line-height-caption: 1.45;
  --line-height-micro: 1.4;
  --line-height-section-label: 1;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-label: 0.10em;

  /* --- spacing / radius --- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  --radius-button: 4px;
  --radius-card: 4px;
  --radius-input: 4px;
  --radius-badge: 2px;

  /* --- shadow / motion / opacity / z-index --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.12);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.14);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-default: ease-out;
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-linear: linear;
  --opacity-disabled: 0.4;
  --opacity-muted: 0.64;
  --opacity-subtle: 0.08;
  --opacity-overlay: 0.55;
  --opacity-full: 1;
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-popover: 1400;
  --z-toast: 1500;
  --z-tooltip: 1600;
}

/* --- dark mode: explicit toggle (primary) --- */
[data-theme="dark"] {
  --color-brand-primary: var(--color-primary-400);
  --color-brand-secondary: var(--color-secondary-400);
  --color-brand-accent: var(--color-accent-400);
  --color-brand-mark: var(--color-neutral-50);
  --color-bg-page: #121212;
  --color-bg-card: #1A1A1A;
  --color-bg-elevated-1: #222222;
  --color-bg-elevated-2: #2A2A2A;
  --color-bg-elevated-3: #323232;
  --color-bg-subtle: #222222;
  --color-text-heading: #F0F0F0;
  --color-text-body: #D0D0D0;
  --color-text-secondary: #A8A8A8;
  --color-text-muted: #787878;
  --color-text-link: var(--color-primary-400);
  --color-text-on-primary: #121212;
  --color-border-default: rgba(255,255,255,0.08);
  --color-border-strong: rgba(255,255,255,0.16);
  --color-border-subtle: rgba(255,255,255,0.05);
  --color-feedback-success: var(--color-success-300);
  --color-feedback-warning: var(--color-warning-300);
  --color-feedback-error: var(--color-error-300);
  --color-feedback-info: var(--color-info-300);
  --font-weight-regular: 500;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.16);
  --shadow-md: 0 3px 12px rgba(0,0,0,0.24);
  --shadow-lg: 0 6px 24px rgba(0,0,0,0.28);
}

/* --- dark mode: system fallback (only when no explicit data-theme) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-brand-primary: var(--color-primary-400);
    --color-brand-secondary: var(--color-secondary-400);
    --color-brand-accent: var(--color-accent-400);
    --color-brand-mark: var(--color-neutral-50);
    --color-bg-page: #121212;
    --color-bg-card: #1A1A1A;
    --color-bg-elevated-1: #222222;
    --color-bg-elevated-2: #2A2A2A;
    --color-bg-elevated-3: #323232;
    --color-bg-subtle: #222222;
    --color-text-heading: #F0F0F0;
    --color-text-body: #D0D0D0;
    --color-text-secondary: #A8A8A8;
    --color-text-muted: #787878;
    --color-text-link: var(--color-primary-400);
    --color-text-on-primary: #121212;
    --color-border-default: rgba(255,255,255,0.08);
    --color-border-strong: rgba(255,255,255,0.16);
    --color-border-subtle: rgba(255,255,255,0.05);
    --color-feedback-success: var(--color-success-300);
    --color-feedback-warning: var(--color-warning-300);
    --color-feedback-error: var(--color-error-300);
    --color-feedback-info: var(--color-info-300);
    --font-weight-regular: 500;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.16);
    --shadow-md: 0 3px 12px rgba(0,0,0,0.24);
    --shadow-lg: 0 6px 24px rgba(0,0,0,0.28);
  }
}

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; }
}