/* =========================================================================
   JSC – Design Tokens
   Quelle: JSC Tax Style Guide
   Light Mode (default) + Dark Mode (prefers-color-scheme)
   ========================================================================= */

:root {
  /* --- Brand --------------------------------------------------------- */
  --color-brand:           #00B0F0;   /* Primärfarbe (Corporate Blau) */
  --color-brand-strong:    #0090C9;   /* Hover / Press                */
  --color-brand-soft:      #E6F7FE;   /* Sehr helle Brand-Fläche      */

  /* --- Surfaces ------------------------------------------------------ */
  --color-bg:              #FFFFFF;
  --color-bg-elevated:     #FFFFFF;
  --color-bg-muted:        #F5F5F5;   /* Akzent / Section-Wechsel     */
  --color-border:          #E5E7EB;
  --color-border-strong:   #D1D5DB;

  /* --- Text --------------------------------------------------------- */
  --color-text:            #333333;   /* Body                          */
  --color-text-strong:     #000000;   /* Headings                      */
  --color-text-muted:      #6B7280;
  --color-text-on-brand:   #FFFFFF;
  --color-link:            #0090C9;
  --color-link-hover:      #006E9B;

  /* --- Feedback ----------------------------------------------------- */
  --color-focus:           #00B0F0;
  --color-success:         #0E7C66;
  --color-error:           #B42318;

  /* --- Typography --------------------------------------------------- */
  /* CJK-fähige Stacks; Body bewusst Sans für klare Wirkung auf Web */
  --font-heading: "Noto Sans JP", "Noto Sans SC", "Noto Sans TC",
                  "Noto Sans", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", system-ui, sans-serif;
  --font-body:    "Noto Sans JP", "Noto Sans SC", "Noto Sans TC",
                  "Roboto", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid Type Scale (clamp: min, preferred, max) – modular 1.250 */
  --fs-xs:   clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --fs-sm:   clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --fs-base: clamp(1.00rem, 0.95rem + 0.25vw, 1.10rem);
  --fs-md:   clamp(1.15rem, 1.05rem + 0.50vw, 1.30rem);
  --fs-lg:   clamp(1.40rem, 1.20rem + 1.00vw, 1.65rem);
  --fs-xl:   clamp(1.75rem, 1.40rem + 1.75vw, 2.20rem);
  --fs-2xl:  clamp(2.00rem, 1.55rem + 2.25vw, 3.00rem);
  --fs-3xl:  clamp(2.20rem, 1.60rem + 2.75vw, 4.00rem);

  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  /* --- Spacing (4px Basis) ------------------------------------------ */
  --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;
  --space-10: 8rem;

  /* --- Layout ------------------------------------------------------- */
  --container-max: 80rem;        /* 1280px */
  /* Container-Padding: auf sehr schmalen Android-Viewports (~360px) bewusst
     niedrig (0.875rem = 14px) damit lange Headlines garantiert Platz haben. */
  --container-pad: clamp(0.875rem, 4vw, 2.5rem);
  --section-py:    clamp(4rem, 8vw, 7rem);

  /* --- Radius / Borders / Shadows ----------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10);

  /* --- Motion ------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* --- Z-Index ------------------------------------------------------ */
  --z-header:   100;
  --z-overlay:  900;
  --z-modal:   1000;

  /* --- Header ------------------------------------------------------- */
  --header-h: 5rem;
}

/* --- Dark Mode (automatisch) ----------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #1A1A1A;
    --color-bg-elevated:   #242424;
    --color-bg-muted:      #1F1F1F;
    --color-border:        #2E2E2E;
    --color-border-strong: #3D3D3D;

    --color-text:          #CFCFCF;
    --color-text-strong:   #ECECEC;
    --color-text-muted:    #9A9A9A;
    --color-text-on-brand: #FFFFFF;

    --color-link:          #4DC8F5;
    --color-link-hover:    #8FDDF8;
    --color-brand-soft:    rgba(0, 176, 240, 0.12);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  }
}