/* ==========================================================================
   DESIGN TOKENS – CD Bund
   BBL Workspace Management

   Aligned with the official Swiss Federal Design System (swiss/designsystem).
   All values resolved from official Tailwind config + PostCSS source files.
   Reference: github.com/swiss/designsystem

   Responsive tokens scale at official breakpoints:
   xs: 480px | sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1544px | 3xl: 1920px
   ========================================================================== */

/* ── @FONT-FACE – CD Bund font-face.postcss ─────────────────────────────── */
@font-face {
  font-family: 'Font-Regular';
  font-style: normal;
  font-display: swap;
  src: url('./fonts/NotoSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Font-Bold';
  font-style: normal;
  font-display: swap;
  src: url('./fonts/NotoSans-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Font-Italic';
  font-style: italic;
  font-display: swap;
  src: url('./fonts/NotoSans-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Font-Bold-Italic';
  font-style: italic;
  font-display: swap;
  src: url('./fonts/NotoSans-BoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Fallback-font';
  src: local(Verdana);
  advance-override: 125%;
  ascent-override: 95%;
  descent-override: -25%;
  line-gap-override: 25%;
}

:root {

  /* ── BRAND (Official primary palette = Swiss Red) ──────────────────────── */
  --color-accent:              #D8232A;          /* primary-600 */
  --color-accent-light:        #E53940;          /* primary-500 */
  --color-accent-dark:         #BF1F25;          /* primary-700 */

  /* ── INTERACTIVE (project-specific blue) ─────────────────────────────── */
  --color-primary:             #006699;
  --color-primary-hover:       #005580;
  --color-primary-50:          #E8F0FE;
  --color-primary-light:       #E6F0F7;
  --color-primary-dark:        #004B6E;

  /* ── NEUTRALS (Official text palette) ──────────────────────────────────── */
  --color-black:               #000000;
  --color-white:               #FFFFFF;

  --color-gray-50:             #F9FAFB;
  --color-gray-100:            #F3F4F6;
  --color-gray-200:            #E5E7EB;
  --color-gray-300:            #D1D5DB;
  --color-gray-400:            #9CA3AF;
  --color-gray-500:            #6B7280;
  --color-gray-600:            #4B5563;
  --color-gray-700:            #374151;
  --color-gray-800:            #1F2937;
  --color-gray-900:            #111827;

  /* ── SECONDARY (Official secondary palette, blue-gray) ─────────────────── */
  --color-secondary-50:        #F0F4F7;
  --color-secondary-100:       #DFE4E9;
  --color-secondary-200:       #ACB4BD;
  --color-secondary-300:       #828E9A;
  --color-secondary-400:       #596978;
  --color-secondary-500:       #46596B;
  --color-secondary-600:       #2F4356;
  --color-secondary-700:       #263645;
  --color-secondary-800:       #1C2834;
  --color-secondary-900:       #131B22;

  /* ── SEMANTIC TEXT ─────────────────────────────────────────────────────── */
  --color-text-primary:        #1F2937;          /* text-800 */
  --color-text-secondary:      #6B7280;          /* text-500 */
  --color-text-muted:          #9CA3AF;          /* text-400 */
  --color-text-inverse:        #FFFFFF;
  --color-text-on-dark:        rgba(255, 255, 255, 0.7);

  /* ── SURFACES & BACKGROUNDS ───────────────────────────────────────────── */
  --color-bg-default:          #FFFFFF;
  --color-bg-alt:              #F3F4F6;          /* gray-100 */
  --color-bg-surface:          #F9FAFB;          /* gray-50 */
  --color-bg-highlight:        #FFFAB2;
  --color-surface-dark:        #2F4356;          /* secondary-600 (top bar, footer) */
  --color-surface-darker:      #263645;          /* secondary-700 (footer bottom) */

  /* ── BORDERS ──────────────────────────────────────────────────────────── */
  --color-border:              #E5E7EB;          /* gray-200 */
  --color-border-light:        #F3F4F6;          /* gray-100 */
  --color-border-input:        #6B7280;          /* text-500 / gray-500 – per input.postcss */

  /* ── FOCUS ────────────────────────────────────────────────────────────── */
  --color-focus:               #8655F6;          /* Official purple-500 */
  --color-focus-dark:          #C4B5FD;          /* Official purple-300 – for dark backgrounds */

  /* ── STATUS / SEMANTIC ────────────────────────────────────────────────── */
  --color-success:             #047857;          /* green-700 */
  --color-success-light:       #D1FAE5;          /* green-100 */
  --color-warning:             #F59E0B;          /* yellow-500 */
  --color-warning-light:       #FEF3C7;          /* yellow-100 */
  --color-error:               #D8232A;          /* red-600 */
  --color-error-light:         #FEE2E2;          /* red-100 */
  --color-info:                #0F6B75;          /* teal-700 */
  --color-info-light:          #CCFBF1;          /* teal-100 */

  /* ── BADGE COLORS (CD Bund badge palette) ─────────────────────────── */
  --color-badge-green-bg:      #D1FAE5;          /* green-100 */
  --color-badge-green-text:    #065F46;          /* green-800 */
  --color-badge-blue-bg:       #DBEAFE;          /* blue-100 */
  --color-badge-blue-text:     #1E40AF;          /* blue-800 */
  --color-badge-red-bg:        #FAE1E2;          /* red-100 (CD Bund) */
  --color-badge-red-text:      #99191E;          /* red-800 (CD Bund) */
  --color-badge-yellow-bg:     #FEF3C7;          /* yellow-100 */
  --color-badge-yellow-text:   #92400E;          /* yellow-800 */
  --color-badge-orange-bg:     #FFEDD5;          /* orange-100 */
  --color-badge-orange-text:   #9A3412;          /* orange-800 */

  /* ── ALPHA / OVERLAY ──────────────────────────────────────────────────── */
  --color-white-50:            rgba(255, 255, 255, 0.5);
  --color-white-40:            rgba(255, 255, 255, 0.4);
  --color-white-30:            rgba(255, 255, 255, 0.3);
  --color-white-20:            rgba(255, 255, 255, 0.2);
  --color-white-15:            rgba(255, 255, 255, 0.15);
  --color-white-10:            rgba(255, 255, 255, 0.1);
  --color-backdrop:            rgba(0, 0, 0, 0.7);
  --color-black-10:            rgba(0, 0, 0, 0.1);

  /* ── PROTOTYPE (project-specific) ───────────────────────────────────── */
  --color-prototype-notice:    #ff4444;

  /* ── RAUMPLANUNG (project-specific tool palette) ─────────────────────── */
  --color-rp-primary:          #005ea8;
  --color-rp-primary-dark:     #003C69;
  --color-rp-primary-hover:    #00508C;
  --color-rp-blue-50:          #e8f0fa;
  --color-rp-blue-100:         #e0edff;
  --color-rp-blue-200:         #d0e2fa;
  --color-rp-surface:          #EBF0F5;
  --color-rp-surface-hover:    #DEE5ED;
  --color-rp-tool-text:        #5e666b;

  /* ── CIRCULAR-HUB (project-specific) ──────────────────────────────────── */
  --color-circular:            #047857;
  --color-circular-light:      #D1FAE5;
  --color-circular-dark:       #065F46;
  --color-circular-bg:         #ECFDF5;

  /* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */
  --font-family:               "Font-Regular", "Hind", "Fallback-font", sans-serif;
  --font-family-bold:          "Font-Bold", "Hind", "Fallback-font", sans-serif;
  --font-family-italic:        "Font-Italic", "Hind", "Fallback-font";
  --font-family-bold-italic:   "Font-Bold-Italic", "Hind", "Fallback-font";
  --font-family-mono:          "JetBrains Mono", "Fira Code", Consolas, monospace;

  /* Responsive type scale – base (mobile-first) values.
     Aligned with official text--base through text--4xl.
     Scales at lg(1024), xl(1280), 3xl(1920) breakpoints. */
  --text-display:              2rem;             /* text--4xl base */
  --text-h1:                   1.625rem;         /* text--3xl base (26px) */
  --text-h2:                   1.375rem;         /* text--2xl base (22px) */
  --text-h3:                   1.25rem;          /* text--xl base (20px) */
  --text-h4:                   1.125rem;         /* text--lg base (18px) */
  --text-h5:                   1rem;             /* text--base */
  --text-body:                 1rem;             /* text--base (16px) */
  --text-body-sm:              0.875rem;         /* text--sm (14px) */
  --text-body-xs:              0.75rem;          /* text--xs (12px) */
  --text-micro:                0.625rem;          /* 10px – compact UI labels */
  --text-mini:                 0.6875rem;         /* 11px – small UI text */
  --text-caption:              0.75rem;          /* text--xs (12px) */
  --text-compact:              0.8125rem;         /* 13px – compact component text */
  --text-label:                0.875rem;         /* text--sm (14px) */

  /* Line heights (aligned with Tailwind defaults) */
  --line-height-tight:         1.25;
  --line-height-snug:          1.375;
  --line-height-normal:        1.5;
  --line-height-relaxed:       1.625;
  --line-height-loose:         2;

  /* Font weights */
  --font-weight-normal:        400;
  --font-weight-medium:        500;
  --font-weight-semibold:      600;
  --font-weight-bold:          700;

  /* Letter spacing */
  --letter-spacing-tight:      0.3px;
  --letter-spacing-normal:     0.5px;
  --letter-spacing-wide:       1.2px;

  /* ── SPACING (4px base unit) ──────────────────────────────────────────── */
  --space-0-5:                 2px;              /* 0.5 × 4px base */
  --space-xs:                  4px;
  --space-1-5:                 6px;              /* 1.5 × 4px base */
  --space-sm:                  8px;
  --space-2-5:                 10px;             /* 2.5 × 4px base */
  --space-3:                   12px;             /* 3 × 4px base */
  --space-md:                  16px;
  --space-lg:                  24px;
  --space-xl:                  32px;
  --space-2xl:                 48px;
  --space-3xl:                 64px;
  --space-4xl:                 80px;

  /* ── LAYOUT (responsive, base/mobile-first values) ──────────────────── */
  --container-max-width:       1544px;           /* Official 2xl */
  --container-padding:         1rem;             /* px-4 (16px) */
  --grid-gutter:               1.25rem;          /* gap-5 (20px) */
  --sidebar-width:             280px;

  /* Section vertical padding */
  --section-py:                3.5rem;           /* py-14 (56px) */
  --section-py-half:           1.75rem;          /* py-7 (28px) */

  /* Top-header vertical padding */
  --top-header-py:             0.75rem;          /* py-3 (12px) */

  /* Button min-heights */
  --btn-min-h:                 44px;
  --btn-sm-min-h:              34px;
  --btn-lg-min-h:              48px;

  /* Component heights */
  --topbar-height:             46px;
  --nav-height:                56px;              /* main-navigation base */

  /* ── ICON SIZES (CD Bund icons.postcss) ──────────────────────────────── */
  --icon-sm:                   0.75rem;           /* 12px – h-3 (icon--sm) */
  --icon-base:                 1rem;              /* 16px – h-4 (icon--base) */
  --icon-md:                   1.25rem;           /* 20px – h-5 (icon--md) */
  --icon-lg:                   1.5rem;            /* 24px – h-6 (icon--lg) */
  --icon-xl:                   1.75rem;           /* 28px – h-7 (icon--xl) */
  --icon-2xl:                  2.25rem;           /* 36px – h-9 (icon--2xl) */
  --icon-3xl:                  3rem;              /* 48px – h-12 (icon--3xl) */
  --icon-4xl:                  5rem;              /* 80px – h-20 (icon--4xl) */

  /* Icon stroke width (CD default) */
  --icon-stroke:               0.3px;

  /* ── BREAKPOINTS (reference) ──────────────────────────────────────────── */
  /* xs: 480px | sm: 640px | md: 768px | lg: 1024px |
     xl: 1280px | 2xl: 1544px | 3xl: 1920px          */

  /* ── BORDER RADIUS (aligned with official Tailwind config) ─────────── */
  --radius-xs:                 1px;
  --radius-sm:                 2px;
  --radius:                    3px;              /* DEFAULT */
  --radius-lg:                 5px;
  --radius-xl:                 6px;
  --radius-2xl:                8px;
  --radius-3xl:                10px;
  --radius-4xl:                12px;             /* CD Bund 4xl */
  --radius-5xl:                15px;             /* CD Bund 5xl */
  --radius-6xl:                24px;             /* CD Bund 6xl */
  --radius-pill:               20px;             /* pill-shaped buttons (project-specific) */
  --radius-full:               9999px;

  /* ── SHADOWS (official dual-layer) ──────────────────────────────────── */
  --shadow-sm:                 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow:                    0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 5px rgba(0, 0, 0, 0.08);
  --shadow-md:                 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 4px 10px -1px rgba(0, 0, 0, 0.08);
  --shadow-lg:                 0 2px 6px -1px rgba(0, 0, 0, 0.06), 0 5px 20px -3px rgba(0, 0, 0, 0.08);
  --shadow-xl:                 0 6px 10px -5px rgba(0, 0, 0, 0.06), 0 15px 25px -3px rgba(0, 0, 0, 0.09);
  --shadow-2xl:                0 10px 20px rgba(0, 0, 0, 0.06), 1px 10px 70px -8px rgba(0, 0, 0, 0.13);
  --shadow-none:               0 0 0 rgba(0, 0, 0, 0);

  /* Raumplanung-specific shadows (project-specific) */
  --shadow-rp-sm:              0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-rp:                 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-rp-md:              0 2px 10px rgba(0, 0, 0, 0.18);
  --shadow-rp-lg:              0 2px 12px rgba(0, 0, 0, 0.2);
  --shadow-rp-card:            0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-rp-label:           0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-rp-button:          0 2px 4px rgba(0, 0, 0, 0.15);

  /* ── TRANSITIONS ──────────────────────────────────────────────────────── */
  --transition-fast:           150ms ease;
  --transition-normal:         250ms ease;
  --transition-slow:           350ms ease;

  /* ── Z-INDEX SCALE ────────────────────────────────────────────────────── */
  --z-dropdown:                100;
  --z-topbar:                  150;
  --z-sticky:                  200;
  --z-modal-backdrop:          300;
  --z-modal:                   400;
  --z-tooltip:                 500;
}

/* ── RESPONSIVE TOKEN OVERRIDES ─────────────────────────────────────────── */

/* xs ≥480px */
@media (min-width: 480px) {
  :root {
    --container-padding:       1.75rem;          /* px-7 (28px) */
    --grid-gutter:             1.75rem;          /* gap-7 (28px) */
  }
}

/* sm ≥640px */
@media (min-width: 640px) {
  :root {
    --container-padding:       2.25rem;          /* px-9 (36px) */
    --grid-gutter:             2.25rem;          /* gap-9 (36px) */
  }
}

/* md ≥768px */
@media (min-width: 768px) {
  :root {
    --top-header-py:           1rem;             /* py-4 (16px) */
  }
}

/* lg ≥1024px */
@media (min-width: 1024px) {
  :root {
    /* Typography – heading sizes scale up */
    --text-display:            2.5rem;           /* text--4xl → lg:5xl */
    --text-h1:                 2rem;             /* text--3xl → lg:4xl */
    --text-h2:                 1.625rem;         /* text--2xl → lg:3xl */
    --text-h3:                 1.375rem;         /* text--xl → lg:2xl */

    /* Layout */
    --container-padding:       2.5rem;           /* px-10 (40px) */
    --grid-gutter:             2.5rem;           /* gap-10 (40px) */
    --section-py:              5rem;             /* py-20 (80px) */
    --section-py-half:         2.5rem;           /* py-10 (40px) */
    --top-header-py:           1.5rem;           /* py-6 (24px) */
  }
}

/* xl ≥1280px */
@media (min-width: 1280px) {
  :root {
    /* Typography – ALL sizes scale up */
    --text-display:            3rem;             /* text--4xl → xl:6xl */
    --text-h1:                 2.5rem;           /* text--3xl → xl:5xl */
    --text-h2:                 2rem;             /* text--2xl → xl:4xl */
    --text-h3:                 1.625rem;         /* text--xl → xl:3xl */
    --text-h4:                 1.25rem;          /* text--lg → xl:xl */
    --text-h5:                 1.125rem;         /* text--base → xl:lg */
    --text-body:               1.125rem;         /* text--base → xl:lg */
    --text-body-sm:            1rem;             /* text--sm → xl:base */
    --text-body-xs:            0.875rem;         /* text--xs → xl:sm */
    --text-caption:            0.875rem;
    --text-label:              1rem;

    /* Layout */
    --container-padding:       3rem;             /* px-12 (48px) */
    --grid-gutter:             3rem;             /* gap-12 (48px) */
    --top-header-py:           2rem;             /* py-8 (32px) */
    --nav-height:              64px;             /* main-navigation xl (h-16) */

    /* Buttons */
    --btn-min-h:               48px;
    --btn-sm-min-h:            40px;
    --btn-lg-min-h:            52px;
  }
}

/* 3xl ≥1920px */
@media (min-width: 1920px) {
  :root {
    /* Typography – final scale */
    --text-display:            3.5rem;           /* text--4xl → 3xl:7xl */
    --text-h1:                 3rem;             /* text--3xl → 3xl:6xl */
    --text-h2:                 2.5rem;           /* text--2xl → 3xl:5xl */
    --text-h3:                 2rem;             /* text--xl → 3xl:4xl */
    --text-h4:                 1.375rem;         /* text--lg → 3xl:2xl */
    --text-h5:                 1.25rem;          /* text--base → 3xl:xl */
    --text-body:               1.25rem;          /* text--base → 3xl:xl */
    --text-body-sm:            1.125rem;         /* text--sm → 3xl:lg */
    --text-body-xs:            1rem;             /* text--xs → 3xl:base */
    --text-caption:            1rem;
    --text-label:              1.125rem;

    /* Layout */
    --container-max-width:     1676px;           /* 3xl container */
    --container-padding:       4rem;             /* px-16 (64px) */
    --grid-gutter:             4rem;             /* gap-16 (64px) */
    --section-py:              8rem;             /* py-32 (128px) */
    --section-py-half:         4rem;             /* py-16 (64px) */
    --top-header-py:           2.5rem;           /* py-10 (40px) */
    --nav-height:              80px;             /* main-navigation 3xl */

    /* Buttons */
    --btn-min-h:               52px;
    --btn-sm-min-h:            44px;
    --btn-lg-min-h:            56px;
  }
}