/* ═══════════════════════════════════════════════════════════════════
   MADZINE Brand — Design Token System
   Based on Subdued Vibrancy / Edo Twilight (江戶暮色)
   ═══════════════════════════════════════════════════════════════════

   All OKLCH values are pre-computed (no relative color syntax).
   Supports Light / Dark mode via [data-mode] or prefers-color-scheme.

   Architecture:
   - Layer 0: Primitive palette (Edo Twilight OKLCH values)
   - Layer 1: Semantic aliases (surface, text, border, color)
   - Layer 2: Interaction states (hover, active, focus, disabled)
   - Layer 3: Typography, spacing, radius, shadows, transitions
   ═══════════════════════════════════════════════════════════════════ */


/* ─── Layer 0: Primitive Palette — Edo Twilight ────────────────── */

:root {
  --p-light:        oklch(0.95 0.01 80);    /* 月白 */
  --p-warm-mid:     oklch(0.60 0.04 50);    /* 鼠色 Nezumi */
  --p-warm-mid-2:   oklch(0.64 0.09 70);    /* 狐色 Kitsune */
  --p-cool-mid:     oklch(0.61 0.07 135);   /* 鶯色 Uguisu */
  --p-warm-accent:  oklch(0.64 0.09 70);    /* 狐色 Kitsune */
  --p-cool-bridge:  oklch(0.65 0.06 295);   /* 藤色 Fuji */
  --p-dark:         oklch(0.27 0.01 55);    /* 墨色 Sumi */
  --p-neutral:      oklch(0.55 0.04 235);   /* 藍鼠 Ai-Nezumi */
}


/* ─── Layer 1: Semantic Tokens — Light Mode ────────────────────── */

:root,
[data-mode="light"] {
  /* ── Surfaces ── */
  --surface-base:       oklch(0.83 0.010 80);
  --surface-raised:     oklch(0.80 0.010 80);
  --surface-sunken:     oklch(0.77 0.012 80);
  --surface-overlay:    oklch(0.27 0.01 55 / 0.04);

  /* ── Text ── */
  --text-primary:       oklch(0.27 0.01 55);
  --text-secondary:     oklch(0.47 0.01 55);
  --text-tertiary:      oklch(0.62 0.01 55);
  --text-inverse:       oklch(0.95 0.01 80);
  --text-on-accent:     oklch(0.98 0.005 0);

  /* ── Borders ── */
  --border-default:     oklch(0.80 0.005 265);
  --border-strong:      oklch(0.65 0.008 265);
  --border-focus:       oklch(0.64 0.13 70);

  /* ── Palette Colors (functional) ── */
  --color-primary:      oklch(0.64 0.09 70);
  --color-secondary:    oklch(0.61 0.07 135);
  --color-tertiary:     oklch(0.65 0.06 295);
  --color-warm:         oklch(0.60 0.04 50);
  --color-warm-2:       oklch(0.64 0.09 70);
  --color-neutral:      oklch(0.55 0.04 235);

  /* ── Semantic Colors ── */
  --semantic-success:         oklch(0.62 0.08 150);
  --semantic-success-subtle:  oklch(0.92 0.02 150);
  --semantic-success-text:    oklch(0.35 0.06 150);
  --semantic-success-border:  oklch(0.72 0.06 150);

  --semantic-warning:         oklch(0.72 0.10 75);
  --semantic-warning-subtle:  oklch(0.93 0.03 75);
  --semantic-warning-text:    oklch(0.40 0.08 75);
  --semantic-warning-border:  oklch(0.78 0.07 75);

  --semantic-error:           oklch(0.60 0.10 20);
  --semantic-error-subtle:    oklch(0.93 0.02 20);
  --semantic-error-text:      oklch(0.38 0.08 20);
  --semantic-error-border:    oklch(0.70 0.07 20);

  --semantic-info:            oklch(0.62 0.06 245);
  --semantic-info-subtle:     oklch(0.93 0.015 245);
  --semantic-info-text:       oklch(0.38 0.05 245);
  --semantic-info-border:     oklch(0.72 0.04 245);
}


/* ─── Layer 1: Semantic Tokens — Dark Mode ─────────────────────── */

[data-mode="dark"] {
  /* ── Surfaces ── */
  --surface-base:       oklch(0.22 0.005 265);
  --surface-raised:     oklch(0.28 0.005 265);
  --surface-sunken:     oklch(0.18 0.005 265);
  --surface-overlay:    oklch(0.95 0.01 80 / 0.06);

  /* ── Text ── */
  --text-primary:       oklch(0.93 0.01 80);
  --text-secondary:     oklch(0.83 0.015 80);
  --text-tertiary:      oklch(0.70 0.01 80);
  --text-inverse:       oklch(0.27 0.01 55);
  --text-on-accent:     oklch(0.18 0.01 0);

  /* ── Borders ── */
  --border-default:     oklch(0.38 0.008 265);
  --border-strong:      oklch(0.50 0.010 265);
  --border-focus:       oklch(0.74 0.13 70);

  /* ── Palette Colors (lifted for dark bg) ── */
  --color-primary:      oklch(0.72 0.11 70);
  --color-secondary:    oklch(0.69 0.085 135);
  --color-tertiary:     oklch(0.73 0.075 295);
  --color-warm:         oklch(0.66 0.05 50);
  --color-warm-2:       oklch(0.70 0.10 70);
  --color-neutral:      oklch(0.60 0.04 235);

  /* ── Semantic Colors ── */
  --semantic-success:         oklch(0.70 0.08 150);
  --semantic-success-subtle:  oklch(0.30 0.03 150);
  --semantic-success-text:    oklch(0.80 0.06 150);
  --semantic-success-border:  oklch(0.50 0.05 150);

  --semantic-warning:         oklch(0.76 0.10 75);
  --semantic-warning-subtle:  oklch(0.32 0.04 75);
  --semantic-warning-text:    oklch(0.82 0.07 75);
  --semantic-warning-border:  oklch(0.55 0.06 75);

  --semantic-error:           oklch(0.68 0.10 20);
  --semantic-error-subtle:    oklch(0.30 0.04 20);
  --semantic-error-text:      oklch(0.82 0.07 20);
  --semantic-error-border:    oklch(0.50 0.06 20);

  --semantic-info:            oklch(0.70 0.06 245);
  --semantic-info-subtle:     oklch(0.30 0.025 245);
  --semantic-info-text:       oklch(0.82 0.04 245);
  --semantic-info-border:     oklch(0.50 0.04 245);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --surface-base:       oklch(0.22 0.005 265);
    --surface-raised:     oklch(0.28 0.005 265);
    --surface-sunken:     oklch(0.18 0.005 265);
    --surface-overlay:    oklch(0.95 0.01 80 / 0.06);

    --text-primary:       oklch(0.93 0.01 80);
    --text-secondary:     oklch(0.83 0.015 80);
    --text-tertiary:      oklch(0.70 0.01 80);
    --text-inverse:       oklch(0.27 0.01 55);
    --text-on-accent:     oklch(0.18 0.01 0);

    --border-default:     oklch(0.38 0.008 265);
    --border-strong:      oklch(0.50 0.010 265);
    --border-focus:       oklch(0.74 0.13 70);

    --color-primary:      oklch(0.72 0.11 70);
    --color-secondary:    oklch(0.69 0.085 135);
    --color-tertiary:     oklch(0.73 0.075 295);
    --color-warm:         oklch(0.66 0.05 50);
    --color-warm-2:       oklch(0.70 0.10 70);
    --color-neutral:      oklch(0.60 0.04 235);

    --semantic-success:         oklch(0.70 0.08 150);
    --semantic-success-subtle:  oklch(0.30 0.03 150);
    --semantic-success-text:    oklch(0.80 0.06 150);
    --semantic-success-border:  oklch(0.50 0.05 150);

    --semantic-warning:         oklch(0.76 0.10 75);
    --semantic-warning-subtle:  oklch(0.32 0.04 75);
    --semantic-warning-text:    oklch(0.82 0.07 75);
    --semantic-warning-border:  oklch(0.55 0.06 75);

    --semantic-error:           oklch(0.68 0.10 20);
    --semantic-error-subtle:    oklch(0.30 0.04 20);
    --semantic-error-text:      oklch(0.82 0.07 20);
    --semantic-error-border:    oklch(0.50 0.06 20);

    --semantic-info:            oklch(0.70 0.06 245);
    --semantic-info-subtle:     oklch(0.30 0.025 245);
    --semantic-info-text:       oklch(0.82 0.04 245);
    --semantic-info-border:     oklch(0.50 0.04 245);
  }
}


/* ─── Layer 2: Interaction States — Light Mode ─────────────────── */

:root,
[data-mode="light"] {
  /* Hover: L-0.07, C+0.01 from --color-primary (0.64 0.09 70) */
  --state-hover-bg:        oklch(0.57 0.10 70);
  --state-hover-border:    oklch(0.52 0.10 70);
  --state-hover-shadow:    oklch(0.27 0.01 55 / 0.10);

  /* Active: L-0.12, C+0.02 from --color-primary */
  --state-active-bg:       oklch(0.52 0.11 70);
  --state-active-border:   oklch(0.48 0.11 70);

  /* Focus */
  --state-focus-ring:      oklch(0.64 0.13 70);
  --state-focus-offset:    2px;

  /* Disabled: L+0.15, C*0.4 from --color-primary */
  --state-disabled-bg:     oklch(0.79 0.036 70);
  --state-disabled-text:   oklch(0.57 0.003 55);
  --state-disabled-opacity: 0.5;

  /* Selected: L-0.04, C+0.03 from --color-primary */
  --state-selected-bg:     oklch(0.60 0.12 70);
  --state-selected-border: oklch(0.54 0.13 70);

  /* Surface hover/active (for cards, list items) */
  /* from --surface-raised (0.92 0.01 80) */
  --state-surface-hover:   oklch(0.88 0.015 80);
  --state-surface-active:  oklch(0.84 0.02 80);
}


/* ─── Layer 2: Interaction States — Dark Mode ──────────────────── */

[data-mode="dark"] {
  /* Hover: L+0.06, C+0.01 from dark --color-primary (0.72 0.11 70) */
  --state-hover-bg:        oklch(0.78 0.12 70);
  --state-hover-border:    oklch(0.82 0.12 70);
  --state-hover-shadow:    oklch(0.95 0.01 80 / 0.06);

  /* Active: L+0.10, C+0.02 */
  --state-active-bg:       oklch(0.82 0.13 70);
  --state-active-border:   oklch(0.86 0.13 70);

  /* Focus */
  --state-focus-ring:      oklch(0.74 0.13 70);
  --state-focus-offset:    2px;

  /* Disabled: L-0.15, C*0.3 */
  --state-disabled-bg:     oklch(0.57 0.033 70);
  --state-disabled-text:   oklch(0.65 0.003 80);
  --state-disabled-opacity: 0.4;

  /* Selected: L+0.04, C+0.03 */
  --state-selected-bg:     oklch(0.76 0.14 70);
  --state-selected-border: oklch(0.80 0.15 70);

  /* Surface hover/active (for cards, list items) */
  /* from dark --surface-raised (0.35 0.015 55) */
  --state-surface-hover:   oklch(0.39 0.02 55);
  --state-surface-active:  oklch(0.42 0.025 55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --state-hover-bg:        oklch(0.78 0.12 70);
    --state-hover-border:    oklch(0.82 0.12 70);
    --state-hover-shadow:    oklch(0.95 0.01 80 / 0.06);

    --state-active-bg:       oklch(0.82 0.13 70);
    --state-active-border:   oklch(0.86 0.13 70);

    --state-focus-ring:      oklch(0.74 0.13 70);
    --state-focus-offset:    2px;

    --state-disabled-bg:     oklch(0.57 0.033 70);
    --state-disabled-text:   oklch(0.65 0.003 80);
    --state-disabled-opacity: 0.4;

    --state-selected-bg:     oklch(0.76 0.14 70);
    --state-selected-border: oklch(0.80 0.15 70);

    --state-surface-hover:   oklch(0.39 0.02 55);
    --state-surface-active:  oklch(0.42 0.025 55);
  }
}


/* ─── Layer 3: Typography ──────────────────────────────────────── */

:root {
  /* Font families */
  --font-display: "Barlow Condensed", "Noto Sans JP", system-ui, sans-serif;
  --font-body:    "Barlow Condensed", "Noto Sans JP", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Fira Code", monospace;

  /* Type scale — Major Third (1.250)
     Base: 18.3px (1.143rem)
     Minimum enforced: 16px = 1rem */
  --text-sm:    1rem;       /* 16px — minimum allowed */
  --text-base:  1.143rem;   /* 18.3px */
  --text-md:    1.429rem;   /* 22.9px */
  --text-lg:    1.786rem;   /* 28.6px */
  --text-xl:    2.232rem;   /* 35.7px */
  --text-2xl:   2.790rem;   /* 44.6px */
  --text-3xl:   3.488rem;   /* 55.8px */
  --text-4xl:   4.360rem;   /* 69.7px */

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* Font weights */
  --weight-light:    200;
  --weight-regular:  300;
  --weight-medium:   300;
  --weight-semibold: 300;
  --weight-bold:     300;

  /* Paragraph spacing */
  --paragraph-spacing: 1em;
}


/* ─── Layer 3: Spacing ─────────────────────────────────────────── */

:root {
  /* Atomic spacing — 4px base grid */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;   /* 2px */
  --space-1:    0.25rem;    /* 4px */
  --space-1-5:  0.375rem;   /* 6px */
  --space-2:    0.5rem;     /* 8px */
  --space-3:    0.75rem;    /* 12px */
  --space-4:    1rem;       /* 16px */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-8:    2rem;       /* 32px */
  --space-10:   2.5rem;     /* 40px */
  --space-12:   3rem;       /* 48px */
  --space-16:   4rem;       /* 64px */
  --space-20:   5rem;       /* 80px */
  --space-24:   6rem;       /* 96px */
  --space-32:   8rem;       /* 128px */
  --space-40:   10rem;      /* 160px */
  --space-48:   12rem;      /* 192px */

  /* Semantic spacing — generous for brand site breathing room */
  --gap-inline:       var(--space-3);     /* between inline elements */
  --gap-stack:        var(--space-6);     /* between stacked elements */
  --gap-section:      var(--space-24);    /* between page sections */
  --gap-section-sm:   var(--space-16);    /* compact section gap */
  --padding-card:     var(--space-8);     /* card internal padding */
  --padding-page-x:   var(--space-6);     /* page horizontal gutter */
  --padding-page-y:   var(--space-12);    /* page vertical gutter */
  --padding-input:    var(--space-2) var(--space-3);
  --padding-btn:      var(--space-2) var(--space-5);
}


/* ─── Layer 3: Radius ──────────────────────────────────────────── */

:root {
  --radius-sm:   0.25rem;   /* 4px — subtle */
  --radius-md:   0.5rem;    /* 8px — cards, inputs */
  --radius-lg:   0.75rem;   /* 12px — modals */
  --radius-xl:   1rem;      /* 16px — containers */
  --radius-full: 9999px;    /* pills */
}


/* ─── Layer 3: Shadows ─────────────────────────────────────────── */

:root,
[data-mode="light"] {
  --shadow-sm:   0 1px 2px oklch(0.27 0.01 55 / 0.06);
  --shadow-md:   0 2px 8px oklch(0.27 0.01 55 / 0.08),
                 0 1px 2px oklch(0.27 0.01 55 / 0.04);
  --shadow-lg:   0 4px 16px oklch(0.27 0.01 55 / 0.10),
                 0 2px 4px oklch(0.27 0.01 55 / 0.05);
  --shadow-xl:   0 8px 32px oklch(0.27 0.01 55 / 0.12),
                 0 4px 8px oklch(0.27 0.01 55 / 0.06);
}

[data-mode="dark"] {
  --shadow-sm:   0 1px 2px oklch(0.10 0.005 55 / 0.20);
  --shadow-md:   0 2px 8px oklch(0.10 0.005 55 / 0.28),
                 0 1px 2px oklch(0.10 0.005 55 / 0.16);
  --shadow-lg:   0 4px 16px oklch(0.10 0.005 55 / 0.32),
                 0 2px 4px oklch(0.10 0.005 55 / 0.18);
  --shadow-xl:   0 8px 32px oklch(0.10 0.005 55 / 0.40),
                 0 4px 8px oklch(0.10 0.005 55 / 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --shadow-sm:   0 1px 2px oklch(0.10 0.005 55 / 0.20);
    --shadow-md:   0 2px 8px oklch(0.10 0.005 55 / 0.28),
                   0 1px 2px oklch(0.10 0.005 55 / 0.16);
    --shadow-lg:   0 4px 16px oklch(0.10 0.005 55 / 0.32),
                   0 2px 4px oklch(0.10 0.005 55 / 0.18);
    --shadow-xl:   0 8px 32px oklch(0.10 0.005 55 / 0.40),
                   0 4px 8px oklch(0.10 0.005 55 / 0.22);
  }
}


/* ─── Layer 3: Transitions ─────────────────────────────────────── */

:root {
  --duration-fast:    80ms;
  --duration-normal:  150ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;
  --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ─── Layer 3: Layout Constraints ──────────────────────────────── */

:root {
  --content-width:    72rem;    /* 1152px — main content max */
  --content-narrow:   48rem;    /* 768px — text-heavy content */
  --content-wide:     90rem;    /* 1440px — full-bleed sections */
}


/* ─── Utility: Interactive Component Pattern ───────────────────── */

.interactive {
  transition:
    background-color var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default),
    transform var(--duration-fast) var(--ease-default),
    opacity var(--duration-normal) var(--ease-default);
}

.interactive:hover {
  background-color: var(--state-hover-bg);
  border-color: var(--state-hover-border);
  box-shadow: 0 1px 4px var(--state-hover-shadow);
}

.interactive:active {
  background-color: var(--state-active-bg);
  border-color: var(--state-active-border);
  transform: scale(0.98);
  box-shadow: none;
}

.interactive:focus-visible {
  outline: 2px solid var(--state-focus-ring);
  outline-offset: var(--state-focus-offset);
}

.interactive:disabled,
.interactive[aria-disabled="true"] {
  background-color: var(--state-disabled-bg);
  color: var(--state-disabled-text);
  opacity: var(--state-disabled-opacity);
  pointer-events: none;
  box-shadow: none;
  border-color: transparent;
}

.interactive[aria-selected="true"],
.interactive.selected {
  background-color: var(--state-selected-bg);
  border-color: var(--state-selected-border);
}


/* ─── Utility: Link Styles ─────────────────────────────────────── */

.link {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: oklch(0.64 0.09 70 / 0.3);
  text-underline-offset: 0.15em;
  transition:
    color var(--duration-normal) var(--ease-default),
    text-decoration-color var(--duration-normal) var(--ease-default);
}

.link:hover {
  color: var(--state-hover-bg);
  text-decoration-color: currentColor;
}

.link:active {
  color: var(--state-active-bg);
}

.link:focus-visible {
  outline: 2px solid var(--state-focus-ring);
  outline-offset: var(--state-focus-offset);
  border-radius: var(--radius-sm);
}