/* ==========================================================================
   IT Support Rhein-Main — Design Tokens
   Single Source of Truth for Colors, Typography, Geometry, and Components
   ========================================================================== */

:root {
  /* --- Visual Color Distribution Budget (60-30-10 Architecture) --- */
  --budget-canvas-min: 60%;              /* Canvas, White & Off-White Surfaces (Ideal: ~65%) */
  --budget-charcoal-max: 30%;            /* Dark Header, Footer, Typography & Structure (Ideal: ~27%) */
  --budget-primary-max: 8%;              /* Primary Red/Orange CTA & Focal Accents (Ideal: ~5-6%) */
  --budget-status-max: 3%;               /* Functional Accents: Green/Blue Badges & Hovers */

  /* --- Brand Colors --- */
  --color-primary: #E23712;              /* Signature Red/Orange — Primary CTA, Borders, Badges */
  --color-primary-dark: #C41900;         /* Deep Crimson Red — Text Selection, Active Nav, Dark Hover */
  --color-primary-accent: #A32929;       /* Brick Red — Form Submit Buttons */
  --color-primary-subtle: rgba(226, 55, 18, 0.08);

  /* --- Charcoal & Neutrals --- */
  --color-charcoal-darkest: #100F0F;     /* Shimmer/Image Placeholder Dark */
  --color-charcoal-header: #222224;      /* Main Header Background, H1-H6 Default */
  --color-charcoal-card: #323337;        /* Top Bar, Dark Card Headers, Cutout Borders */
  --color-charcoal-body: #3B4044;        /* Primary Body Copy Color */
  --color-charcoal-muted: #616B74;       /* Floating Labels, Borders, Subdued Elements */
  --color-charcoal-light: #929AA5;       /* Subtitles, Secondary Text, Paragraphs */

  /* --- Surface & Backgrounds --- */
  --color-bg-body: #FFFFFF;              /* Canvas Background */
  --color-bg-surface: #FAFAFA;           /* Soft Surface */
  --color-bg-card: #F5F5F7;              /* Service Sublist Cards & Accents */
  --color-bg-border: #E9EAED;            /* Light Border for Inputs & Dividers */
  --color-bg-divider: rgba(196, 196, 196, 0.1);
  --color-bg-silver: #BCBCBD;            /* Form Intro Box */

  /* --- Action & Status Accents --- */
  --color-accent-green: #008D1E;         /* Success, Hover State for Buttons & Links */
  --color-accent-blue: #0071E3;          /* Service Selection, Appointment Action */
  --color-status-open-bg: #BDDFCF;       /* Opening Hours "Open" Badge */
  --color-status-open-text: #323337;
  --color-status-closed-bg: #616B74;     /* Opening Hours "Closed" Badge */
  --color-status-closed-text: #FFFFFF;
  --color-status-off-bg: rgba(188, 188, 189, 0.2);
  --color-status-off-text: rgba(188, 188, 189, 0.6);

  /* --- Typography --- */
  --font-family-base: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-icons: 'icons';

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --font-style-brand: italic;            /* Distinctive Brand Style */

  /* Typographic Scale */
  --font-size-h1: 38px;
  --line-height-h1: 34px;
  --font-size-h1-home: 46px;
  --line-height-h1-home: 50px;
  --font-size-h2: 28px;
  --font-size-h2-large: 44px;
  --font-size-h3: 22px;
  --font-size-h4: 18px;
  --font-size-h5: 16px;
  --font-size-body: 16px;
  --line-height-body: 1.6;
  --font-size-small: 14px;
  --font-size-caption: 12px;

  /* --- Border Radius Scale --- */
  --radius-btn-large: 22px;              /* Signature .large_button */
  --radius-btn-router: 18px;             /* .router button */
  --radius-btn-pill: 13px;               /* .preisliste pill button */
  --radius-btn-appointment: 10px;        /* .appointment & .close_item */
  --radius-card-small: 10px;
  --radius-card-medium: 14px;
  --radius-card-large: 20px;
  --radius-input: 10px;
  --radius-badge: 12px;

  /* --- Border Weights & Signatures --- */
  --border-width-thick: 7px;
  --border-width-medium: 5px;
  --border-width-regular: 2px;
  --border-width-thin: 1px;

  --border-large-btn: 7px solid var(--color-primary);
  --border-router-btn: 5px solid var(--color-primary);
  --border-pill-btn: 4px solid var(--color-primary-dark);
  --border-input-field: 2px solid var(--color-charcoal-muted);

  /* --- Signature Geometry (Clip-Paths) --- */
  /* Main list container cutout */
  --clip-list-container: polygon(0 0, 55.4% 0px, 56% 12%, 100% 12%, 100% 100%, 0 100%);
  --clip-list-inner: polygon(0 0, 55.24% 0px, 55.85% 12%, 100% 12%, 100% 100%, 0 100%);

  /* Service item cutout */
  --clip-service-container: polygon(0 0, 40.4% 0px, 41% 12%, 100% 12%, 100% 100%, 0 100%);
  --clip-service-inner: polygon(0 0, 40.26% 0px, 40.85% 12%, 100% 12%, 100% 100%, 0 100%);

  /* Active navigation wedge */
  --clip-nav-active: polygon(0 50%, 100% 0px, 100% 100%, 0% 100%);

  /* --- Layout & Grids --- */
  --content-max-width: 1024px;
  --grid-gap: 24px;

  /* --- Transitions --- */
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.25s ease-in-out;
  --transition-smooth: 0.3s ease;
  --transition-color: color 0.3s ease;
  --transition-bg: background-color 300ms linear;

  /* --- Shadows --- */
  --shadow-header: 0px 2px 8px 4px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06);
}