/* Shiori 栞 – Design-Tokens (Familie Musubi: shadcn/zinc, Akzent Rose „beni“)
   Reihenfolge der Dateien: Propshaft bindet app/assets/**/*.css alphabetisch ein,
   darum die Nummern im Dateinamen. Doku: docs/design/README.md */

/* ---------- Schriften (selbst gehostet, kein Google-Request) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/plusjakartasans-latin-d2ff26bc.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/plusjakartasans-latin-ext-ff4456f1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/assets/nunito-700-900-latin-8d9cc785.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/assets/nunito-700-900-latin-ext-f2973fe8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Hell (Standard) ---------- */
:root {
  color-scheme: light;

  --s-bg:          #fafafa;   /* App-Grund, Sidebar          zinc-50  */
  --s-surface:     #ffffff;   /* Inhalt, Karten, Dialoge              */
  --s-surface-2:   #f4f4f5;   /* Hover, Inputs                zinc-100 */
  --s-surface-3:   #e4e4e7;   /* Pressed                      zinc-200 */
  --s-border:      #e4e4e7;   /*                              zinc-200 */
  --s-border-soft: #f0f0f2;
  --s-border-strong: #d4d4d8; /* Hover auf Rahmen             zinc-300 */
  --s-text:        #18181b;   /*                              zinc-900 */
  --s-text-2:      #52525b;   /*                              zinc-600 */
  --s-text-3:      #6b6b75;   /* Hilfstexte, >= 4.5:1 auch auf --s-bg  */
  --s-icon:        #71717a;   /*                              zinc-500 */

  --s-accent:        #e11d48; /* rose-600 – das rote Seidenband */
  --s-accent-hover:  #be123c;
  --s-accent-text:   #be123c; /* Akzent als Schrift auf Soft-Grund */
  --s-accent-soft:   #fff1f2;
  --s-accent-soft-2: #ffe4e6;
  --s-accent-border: #fecdd3;
  --s-on-accent:     #ffffff;
  --s-ring:          rgba(225, 29, 72, .28);
  --s-control-border: #8a8a94; /* Checkbox/Radio, >= 3:1 (WCAG 1.4.11) */
  --s-primary-grad:       linear-gradient(180deg, #f43f5e 0%, #e11d48 100%);
  --s-primary-grad-hover: linear-gradient(180deg, #e11d48 0%, #be123c 100%);
  --s-primary-border: #e11d48;

  /* Signalfarben: Funktion vor Marke */
  --s-success:        #15803d;
  --s-success-bg:     #16a34a;
  --s-success-soft:   #ecfdf3;
  --s-success-border: #bbf7d0;
  --s-danger:         #b91c1c;
  --s-danger-bg:      #dc2626;
  --s-danger-bg-hover:#b91c1c;
  --s-danger-soft:    #fef2f2;
  --s-danger-border:  #fecaca;
  --s-warning:        #b45309;
  --s-warning-bg:     #f59e0b;
  --s-warning-soft:   #fffbeb;
  --s-warning-border: #fde68a;
  --s-info:           #0369a1;
  --s-info-soft:      #f0f9ff;
  --s-info-border:    #bae6fd;
  --s-mark:           rgba(253, 224, 138, .7);

  --s-radius-sm: 6px;
  --s-radius:    8px;
  --s-radius-lg: 12px;
  --s-radius-xl: 16px;
  --s-shadow-xs:  0 1px 2px rgba(24, 24, 27, .04);
  --s-shadow-sm:  0 1px 2px rgba(24, 24, 27, .06), 0 1px 3px rgba(24, 24, 27, .04);
  --s-shadow-pop: 0 12px 32px -8px rgba(24, 24, 27, .14), 0 2px 6px -2px rgba(24, 24, 27, .06);
  --s-shadow-dlg: 0 24px 64px -12px rgba(24, 24, 27, .25), 0 4px 12px -4px rgba(24, 24, 27, .08);
  --s-shadow-glow: 0 1px 2px rgba(24, 24, 27, .04), 0 24px 48px -16px rgba(136, 19, 55, .18);
  --s-toast-bg: #18181b;
  --s-toast-text: #fafafa;
  --s-raised: #ffffff;        /* Menüs, Popover */
  --s-raised-hover: #f4f4f5;
  --s-row-hover: #fafafa;     /* Tabellenzeile beim Überfahren */
  --s-seg-active: #ffffff;    /* aktives Segment im Schalter */

  /* Feste Farben, die in beiden Themes gleich bleiben (Toast ist immer dunkel, PDF-Seite immer Papier) */
  --s-primary-border-hover: #be123c;
  --s-on-danger: #ffffff;
  --s-backdrop: rgba(9, 9, 11, .45);
  --s-overlay: rgba(9, 9, 11, .38);
  --s-paper: #ffffff;
  --s-shadow-paper: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .12);
  --s-shadow-topbar: 0 1px 2px rgba(24, 24, 27, .03);
  --s-shadow-btn: 0 1px 2px rgba(24, 24, 27, .1), inset 0 1px 0 rgba(255, 255, 255, .14);
  --s-shadow-toast: 0 16px 40px -12px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .12);
  --s-toast-muted: #a1a1aa;
  --s-toast-success: #4ade80;
  --s-toast-danger: #f87171;
  --s-toast-accent: #fda4af;
  --s-toast-accent-strong: #fecdd3;
  --s-toast-accent-border: rgba(253, 164, 175, .45);
  --s-toast-hover: rgba(255, 255, 255, .1);
  --s-login-glow-1: rgba(253, 164, 175, .35);
  --s-login-glow-2: rgba(251, 113, 133, .18);
  --s-login-glow-3: rgba(253, 224, 138, .25);
  /* Maskottchen-Illustration: Markenfarben, absichtlich in beiden Themes gleich */
  --s-art-cord: #9f1239;
  --s-art-gold: #fbbf24;
  --s-art-paper: #ffffff;
  --s-art-hole: #ffe4e6;
  --s-art-ink: #1f1b2e;
  --s-art-blush: #f9a8d4;

  /* Schrift-Skala, Basis 16 px (docs/DESIGN_SYSTEM.md §3); auf iOS verhindern 16 px in Inputs das Zoomen */
  --s-text-xs: 12px;    /* Caption: Badges, Labels in Grossbuchstaben */
  --s-text-sm: 14px;    /* Small: Metadaten, Hilfstexte, Knöpfe, Tabellen */
  --s-text-base: 16px;  /* Body, Formulare, H3 */
  --s-text-lg: 18px;    /* Einleitungen */
  --s-text-xl: 20px;    /* H2 */
  --s-text-2xl: 24px;   /* H1 */
  --s-text-3xl: 32px;   /* Kennzahlen, Preise */
  --s-text-lead: clamp(16px, 2.2vw, 19px);
  --s-text-title: clamp(28px, 4vw, 40px);
  --s-text-title-lg: clamp(32px, 5vw, 44px);
  --s-text-display: clamp(40px, 7.2vw, 72px);

  /* Abstände: 8-px-Raster, 4 und 12 px nur als Halbschritt (docs/DESIGN_SYSTEM.md §4) */
  --s-space-1: 4px;
  --s-space-2: 8px;
  --s-space-3: 12px;
  --s-space-4: 16px;
  --s-space-5: 24px;
  --s-space-6: 32px;
  --s-space-7: 48px;
  --s-space-8: 64px;
  --s-space-9: 80px;
  --s-space-10: 96px;

  --s-radius-pill: 999px;
  --s-measure: 65ch;    /* Lesebreite für Fliesstext */

  /* Japanisch (V1.9): Die Webfonts decken nur Latein ab. Kana und Kanji nehmen die Systemschrift
     des Geräts – vor den generischen Familien, sonst wählt Windows eine chinesische Glyphenform.
     Keine eigene Webfont (mehrere MB). */
  --s-font-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", Meiryo;
  --s-font: "Plus Jakarta Sans", var(--s-font-cjk), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s-font-head: "Nunito", "Plus Jakarta Sans", var(--s-font-cjk), ui-rounded, system-ui, sans-serif;
  --s-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --s-sidebar-w: 248px;
  --s-topbar-h: 56px;
  /* Tab-Leiste unten auf dem Handy (B5.4): Höhe ohne Safe-Area */
  --s-tabbar-h: 60px;
  /* Mindestgrösse für Bedienelemente auf Touch-Breite (WCAG 2.5.5, DESIGN_SYSTEM §7) */
  --s-touch: 44px;

  /* Breakpoints (B5.4) – CSS-Variablen gehen in @media nicht, darum hier dokumentiert und per
     stylelint (media-feature-name-value-allowed-list) erzwungen:
       Handy        max-width: 767.98px   (< 768)
       Tablet       max-width: 1023.98px  (< 1024)
       kl. Laptop   max-width: 1279.98px  (< 1280, z. B. Detailseite einspaltig)
     min-width dazu: 768px / 1024px / 1280px */
}

/* ---------- Dunkel: Systemeinstellung, ausser „Hell“ ist gewählt ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --s-bg: #08080a; --s-surface: #141417; --s-surface-2: #1d1d22; --s-surface-3: #2a2a30;
    --s-border: #2a2a30; --s-border-soft: #212126; --s-border-strong: #3f3f46;
    --s-text: #fafafa; --s-text-2: #a1a1aa; --s-text-3: #8e8e98; --s-icon: #a1a1aa;
    --s-accent: #fb7185; --s-accent-hover: #fda4af; --s-accent-text: #fecdd3;
    --s-accent-soft: rgba(251, 113, 133, .16); --s-accent-soft-2: rgba(251, 113, 133, .24);
    --s-accent-border: rgba(251, 113, 133, .38); --s-on-accent: #ffffff;
    --s-ring: rgba(251, 113, 133, .45); --s-control-border: #6b6b75;
    --s-primary-grad: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%);
    --s-primary-grad-hover: linear-gradient(180deg, #e11d48 0%, #be123c 100%);
    --s-primary-border: #e11d48;
    --s-success: #4ade80; --s-success-soft: rgba(74, 222, 128, .12); --s-success-border: rgba(74, 222, 128, .3);
    --s-danger: #fca5a5; --s-danger-soft: rgba(220, 38, 38, .14); --s-danger-border: rgba(220, 38, 38, .35);
    --s-warning: #fbbf24; --s-warning-soft: rgba(251, 191, 36, .12); --s-warning-border: rgba(251, 191, 36, .3);
    --s-info: #7dd3fc; --s-info-soft: rgba(125, 211, 252, .1); --s-info-border: rgba(125, 211, 252, .3);
    --s-mark: rgba(251, 191, 36, .3);
    --s-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --s-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --s-shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04);
    --s-shadow-dlg: 0 24px 64px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .05);
    --s-shadow-glow: 0 24px 48px -16px rgba(0, 0, 0, .6);
    --s-toast-bg: #2a2a30;
    --s-raised: #1d1d22; --s-raised-hover: #2a2a30; --s-row-hover: #1d1d22; --s-seg-active: #2a2a30;
    --s-shadow-paper: 0 0 0 1px rgba(255, 255, 255, .08);
  }
}

/* Gleiche Werte noch einmal für den manuellen Schalter (data-theme="dark" auf <html>) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --s-bg: #08080a; --s-surface: #141417; --s-surface-2: #1d1d22; --s-surface-3: #2a2a30;
  --s-border: #2a2a30; --s-border-soft: #212126; --s-border-strong: #3f3f46;
  --s-text: #fafafa; --s-text-2: #a1a1aa; --s-text-3: #8e8e98; --s-icon: #a1a1aa;
  --s-accent: #fb7185; --s-accent-hover: #fda4af; --s-accent-text: #fecdd3;
  --s-accent-soft: rgba(251, 113, 133, .16); --s-accent-soft-2: rgba(251, 113, 133, .24);
  --s-accent-border: rgba(251, 113, 133, .38); --s-on-accent: #ffffff;
  --s-ring: rgba(251, 113, 133, .45); --s-control-border: #6b6b75;
  --s-primary-grad: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%);
  --s-primary-grad-hover: linear-gradient(180deg, #e11d48 0%, #be123c 100%);
  --s-primary-border: #e11d48;
  --s-success: #4ade80; --s-success-soft: rgba(74, 222, 128, .12); --s-success-border: rgba(74, 222, 128, .3);
  --s-danger: #fca5a5; --s-danger-soft: rgba(220, 38, 38, .14); --s-danger-border: rgba(220, 38, 38, .35);
  --s-warning: #fbbf24; --s-warning-soft: rgba(251, 191, 36, .12); --s-warning-border: rgba(251, 191, 36, .3);
  --s-info: #7dd3fc; --s-info-soft: rgba(125, 211, 252, .1); --s-info-border: rgba(125, 211, 252, .3);
  --s-mark: rgba(251, 191, 36, .3);
  --s-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --s-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --s-shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04);
  --s-shadow-dlg: 0 24px 64px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .05);
  --s-shadow-glow: 0 24px 48px -16px rgba(0, 0, 0, .6);
  --s-toast-bg: #2a2a30;
  --s-raised: #1d1d22; --s-raised-hover: #2a2a30; --s-row-hover: #1d1d22; --s-seg-active: #2a2a30;
  --s-shadow-paper: 0 0 0 1px rgba(255, 255, 255, .08);
}