/* Site50 流せない日 — design tokens (light + dark) */

:root {
  color-scheme: light;

  /* LOCK palette — light mode */
  --color-base: #93b4aa;
  --color-ink: #172c25;
  --color-ink-faint: #2d433d;
  --color-link: #57233d;
  --color-accent: #3d2654;

  /* Surfaces */
  --color-surface: #a8c4bb;
  --color-surface-raised: #bdd2cb;
  --color-surface-inset: #7fa399;
  --color-surface-panel: rgba(255, 255, 255, 0.42);
  --color-surface-overlay: rgba(23, 44, 37, 0.06);

  /* Borders & lines */
  --color-border: rgba(23, 44, 37, 0.18);
  --color-border-strong: rgba(87, 35, 61, 0.45);
  --color-divider: rgba(23, 44, 37, 0.12);

  /* Ruler signature */
  --ruler-tick: var(--color-link);
  --ruler-tick-minor: rgba(87, 35, 61, 0.35);
  --ruler-track: rgba(23, 44, 37, 0.14);
  --ruler-fill: var(--color-accent);
  --ruler-marker: var(--color-link);
  --ruler-bracket: var(--color-accent);

  /* Matrix */
  --matrix-cell: rgba(255, 255, 255, 0.28);
  --matrix-cell-active: rgba(61, 38, 84, 0.22);
  --matrix-cell-border: rgba(23, 44, 37, 0.2);
  --matrix-safe: rgba(61, 38, 84, 0.35);
  --matrix-unsafe: rgba(87, 35, 61, 0.25);

  /* Interactive */
  --color-focus: var(--color-accent);
  --color-button-bg: var(--color-ink);
  --color-button-text: var(--color-base);
  --color-button-hover: #0f1f1a;

  /* Status */
  --color-success: #1e4a3a;
  --color-warning: #57233d;

  /* Typography */
  --font-heading: "BIZ UDMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-mono: "Cutive Mono", "Courier New", monospace;

  --text-xs: 0.8125rem;   /* 13px — minimum for labels/badges */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 0.9375rem; /* 15px — minimum body */
  --text-lg: 1.125rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-display: clamp(1.75rem, 4vw, 2.75rem);

  --leading-tight: 1.25;
  --leading-normal: 1.6;
  --leading-loose: 1.9;

  /* Spacing */
  --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: 4.5rem;

  /* Layout */
  --wrap-max: 78rem;
  --wrap-narrow: 48rem;
  --wrap-content: 62rem;
  --radius-sm: 0.35rem;
  --radius-md: 0.65rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(23, 44, 37, 0.12);
  --shadow-md: 0 6px 20px rgba(23, 44, 37, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.35);

  /* Pattern */
  --pattern-url: url("/images/pattern-light.svg");
  --pattern-opacity: 0.55;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 140ms;
  --duration-normal: 260ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-base: #1a2e28;
    --color-ink: #d8ebe4;
    --color-ink-faint: #9bb5ab;
    --color-link: #d48aaa;
    --color-accent: #b89ad4;

    --color-surface: #223a33;
    --color-surface-raised: #2b4a41;
    --color-surface-inset: #152420;
    --color-surface-panel: rgba(0, 0, 0, 0.28);
    --color-surface-overlay: rgba(0, 0, 0, 0.22);

    --color-border: rgba(216, 235, 228, 0.14);
    --color-border-strong: rgba(212, 138, 170, 0.45);
    --color-divider: rgba(216, 235, 228, 0.1);

    --ruler-tick: var(--color-link);
    --ruler-tick-minor: rgba(212, 138, 170, 0.4);
    --ruler-track: rgba(216, 235, 228, 0.12);
    --ruler-fill: var(--color-accent);
    --ruler-marker: var(--color-link);
    --ruler-bracket: var(--color-accent);

    --matrix-cell: rgba(0, 0, 0, 0.22);
    --matrix-cell-active: rgba(184, 154, 212, 0.22);
    --matrix-cell-border: rgba(216, 235, 228, 0.14);
    --matrix-safe: rgba(184, 154, 212, 0.32);
    --matrix-unsafe: rgba(212, 138, 170, 0.22);

    --color-focus: var(--color-accent);
    --color-button-bg: var(--color-ink);
    --color-button-text: var(--color-base);
    --color-button-hover: #eef7f3;

    --color-success: #7ec9a8;
    --color-warning: #d48aaa;

    --font-heading: "BIZ UDMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --font-body: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --font-mono: "Cutive Mono", "Courier New", monospace;

    --text-xs: 0.8125rem;   /* 13px — minimum for labels/badges */
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.35rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-display: clamp(1.75rem, 4vw, 2.75rem);

    --leading-tight: 1.25;
    --leading-normal: 1.6;
    --leading-loose: 1.9;

    --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: 4.5rem;

    --wrap-max: 68rem;
    --wrap-narrow: 42rem;
    --radius-sm: 0.35rem;
    --radius-md: 0.65rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --pattern-url: url("/images/pattern-dark.svg");
    --pattern-opacity: 0.42;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 140ms;
    --duration-normal: 260ms;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-base: #1a2e28;
  --color-ink: #d8ebe4;
  --color-ink-faint: #9bb5ab;
  --color-link: #d48aaa;
  --color-accent: #b89ad4;

  --color-surface: #223a33;
  --color-surface-raised: #2b4a41;
  --color-surface-inset: #152420;
  --color-surface-panel: rgba(0, 0, 0, 0.28);
  --color-surface-overlay: rgba(0, 0, 0, 0.22);

  --color-border: rgba(216, 235, 228, 0.14);
  --color-border-strong: rgba(212, 138, 170, 0.45);
  --color-divider: rgba(216, 235, 228, 0.1);

  --ruler-tick: var(--color-link);
  --ruler-tick-minor: rgba(212, 138, 170, 0.4);
  --ruler-track: rgba(216, 235, 228, 0.12);
  --ruler-fill: var(--color-accent);
  --ruler-marker: var(--color-link);
  --ruler-bracket: var(--color-accent);

  --matrix-cell: rgba(0, 0, 0, 0.22);
  --matrix-cell-active: rgba(184, 154, 212, 0.22);
  --matrix-cell-border: rgba(216, 235, 228, 0.14);
  --matrix-safe: rgba(184, 154, 212, 0.32);
  --matrix-unsafe: rgba(212, 138, 170, 0.22);

  --color-focus: var(--color-accent);
  --color-button-bg: var(--color-ink);
  --color-button-text: var(--color-base);
  --color-button-hover: #eef7f3;

  --color-success: #7ec9a8;
  --color-warning: #d48aaa;

  --font-heading: "BIZ UDMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-mono: "Cutive Mono", "Courier New", monospace;

  --text-xs: 0.8125rem;   /* 13px — minimum for labels/badges */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 0.9375rem; /* 15px — minimum body */
  --text-lg: 1.125rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-display: clamp(1.75rem, 4vw, 2.75rem);

  --leading-tight: 1.25;
  --leading-normal: 1.6;
  --leading-loose: 1.9;

  --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: 4.5rem;

  --wrap-max: 78rem;
  --wrap-narrow: 48rem;
  --wrap-content: 62rem;
  --radius-sm: 0.35rem;
  --radius-md: 0.65rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --pattern-url: url("/images/pattern-dark.svg");
  --pattern-opacity: 0.42;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 140ms;
  --duration-normal: 260ms;
}