/* ==========================================================================
   BARION DESIGN SYSTEM — Foundation tokens (v3 — Cowork-portable, unified)
   Source of truth: Figma Brand-Guidelines-Design-System
   Primary brand color: Barion Blue #0097DB
   Primary typeface: WeblySleek UI (system sans fallback if not installed)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ */
  /* TYPOGRAPHY                                                         */
  /* ------------------------------------------------------------------ */
  --font-brand: "WeblySleek UI", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  /* No mono typeface in the design system — Péter's call.
     For data alignment, use font-variant-numeric: tabular-nums on the brand font. */

  --fw-light: 300;
  --fw-semilight: 300;        /* v3 fix: production weblysleek_uisemilight = 300 */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale */
  /* Title — canonical large headings, aligned to Figma title styles (Archita audit, 2026-05-31) */
  --fs-title-lg: 64px;       /* Figma title 1 */
  --fs-title-md: 48px;       /* Figma title 2 */
  /* Display — marketing-only extension, not in Figma. Never used in product UI (Archita audit) */
  --fs-display-xl: 100px;
  --fs-display-lg: 60px;
  --fs-display-md: 42px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;        /* Archita audit: 14 / Semilight */
  --fs-body-xs: 12px;        /* NEW — Archita audit, optional smaller body */
  --fs-caption: 14px;        /* Archita audit: was 12, now matches Body SM */
  --fs-micro: 10px;

  --lh-tight: 0.9;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --lh-roomy: 1.75;

  --ls-tight: -0.02em;
  --ls-ui: 0.007em;

  /* ------------------------------------------------------------------ */
  /* COLORS — primitives                                                */
  /* Token names retain --grey-* spelling for back-compat with the      */
  /* barion-design skill and downstream consumers. Visible copy is US.  */
  /* ------------------------------------------------------------------ */
  --barion-blue: #0097DB;
  --blue-gray:   #2C3446;
  --white-gray:  #F9F9F9;

  --blue-50:  #EEFAFF;        /* sidebar active bg */
  --blue-100: #C8EDFF;
  --blue-200: #99D5F1;
  --blue-300: #33ACE2;
  --blue-400: #5DBBFF;
  --blue-500: #0097DB;
  --blue-600: #0097DB;        /* Figma alias */
  --blue-700: #0772CF;
  --blue-700-deep: #0074C7;   /* Button gradient start */
  --blue-800: #007FDB;
  --blue-900: #045691;

  --focus-blue: #99D5F1;      /* input focus border — Archita audit amendment (was #66C1E9) */

  /* Marketing edge-case extras — kept per Archita audit (2026-05-31). NOT for product UI;
     used only in marketing layouts that need a half-step beyond the core palette. */
  --marketing-blue: #087FE7;  /* between --blue-700 (#0772CF) and --blue-500 (#0097DB) */
  --marketing-ink:  #252D3C;  /* darker than --blue-gray (#2C3446) — deep marketing backgrounds */

  --grey-100: #FFFFFF;
  --grey-200: #ECEDF1;
  --grey-300: #DCDFE5;
  --grey-400: #C4CAD7;
  --grey-500: #BABFCC;
  --grey-600: #979FB2;
  --grey-700: #525F7F;
  --grey-800: #46516D;
  --grey-900: #2C3446;
  --grey-1000: #231F20;

  --accent-100: #FFC39E;
  --accent-200: #F89C63;
  --accent-400: #F86B33;
  --accent-600: #C7B011;
  --accent-700: #FFCC00;

  --red-100: #FFC3C3;
  --red-200: #E5484D;
  --red-600: #B4252A;
  --green-100: #B6F0C0;
  --green-400: #70D65F;
  --green-600: #1F8B3C;
  --green-700: #207811;   /* Figma alert/notification success icon */

  /* Gradients */
  --gradient-brand:        linear-gradient(180deg, #007FDB 0%, #0097DB 52%, #99D5F1 100%);
  /* DEPRECATED — off-brand: Figma brand guidelines forbid horizontal gradients. Kept for back-compat; do not use in new UI. */
  --gradient-brand-horiz:  linear-gradient(90deg, #0772CF 0%, #0097DB 50%, #33ACE2 100%);
  --gradient-accent:       linear-gradient(135deg, #F86B33 0%, #FFC39E 100%);
  --gradient-brand-button:      linear-gradient(172deg, #0772CF 22.75%, #0097DB 86.15%);
  --gradient-brand-button-pill: linear-gradient(158deg, #0772CF 22.75%, #0097DB 86.15%);

  /* ------------------------------------------------------------------ */
  /* COLORS — semantic                                                  */
  /* ------------------------------------------------------------------ */
  --text-primary:   var(--grey-900);
  --text-secondary: var(--grey-800);    /* v3 fix: #46516D */
  --text-tertiary:  var(--grey-700);    /* v3 new */
  --text-brand:     var(--blue-700);
  --text-invert:    #FFFFFF;
  --text-link-1:    var(--blue-700);
  --text-link-2:    var(--blue-500);
  --text-disabled:  var(--grey-500);
  --text-inactive:  var(--grey-600);
  --text-error:     #C32D48;            /* Figma text-error */
  --text-button:    #FFFFFF;

  --surface-primary:   #FFFFFF;
  --surface-secondary: var(--grey-200);
  --surface-tertiary:  var(--white-gray);
  --surface-canvas:    #FFFFFF;
  --surface-canvas-soft: var(--white-gray);
  --surface-brand:     var(--blue-500);
  --surface-invert:    var(--grey-900);
  --surface-fill-1:    var(--blue-100);
  --surface-fill-2:    var(--blue-200);
  --surface-nav-active: var(--blue-50);
  --surface-disabled:  var(--grey-200);

  /* Alert / Notification surfaces (pastel — values from Figma Brand-Guidelines node 8496:11886) */
  --surface-alert-success: #EDFFEA;
  --surface-alert-error:   #FFE8ED;
  --surface-alert-warning: #FFF1E4;
  --surface-alert-message: #FFFFFF;
  /* Alert / Notification borders (lighter than form-error border) */
  --border-alert-success:  #7EE86B;
  --border-alert-error:    #FF8097;
  --border-alert-warning:  #F89C63;
  --border-alert-message:  #ECEDF1;
  /* Alert text colors (high contrast on pastel surfaces) */
  --text-alert-error:      #AD223B;

  /* Status chip surfaces (saturated — distinct family) */
  --surface-status-success: #D8FFD1;
  --surface-status-error:   #FFE0E6;
  --surface-status-warning: #FFE8D3;
  --surface-status-neutral: var(--grey-200);

  --text-status-success: #207811;
  --text-status-error:   #C32D48;
  --text-status-warning: #AF471F;
  --text-status-neutral: var(--grey-700);

  /* Borders */
  --border-primary:   var(--grey-300);
  --border-secondary: var(--grey-200);    /* v3 fix: #ECEDF1 */
  --border-strong:    var(--grey-400);
  --border-brand:     var(--blue-500);
  --border-active:    var(--focus-blue);
  --border-error:     #C32D48;            /* Figma border-error */
  --border-success:   var(--green-400);
  --border-warning:   var(--accent-400);

  /* Icons — values from Figma Colours page (Icons/* variables), Archita audit 2.0 */
  --icon-primary:   var(--grey-900);   /* #2C3446 */
  --icon-secondary: var(--grey-800);   /* #46516D (Figma Icon-Secondary) */
  --icon-brand:     var(--blue-700);   /* #0772CF (Figma Icon-Brand) */
  --icon-brand-2:   #087FE7;           /* Figma Icon-Brand 2 */
  --icon-invert:    #FFFFFF;
  --icon-disabled:  var(--grey-400);   /* #C4CAD7 (Figma Icon-Disabled) */
  --icon-error:     #D1314F;           /* Figma Icon-Error */
  --icon-success:   var(--green-700);  /* #207811 (Figma Icon-Success) */
  --icon-alert:     var(--accent-400); /* #F86B33 (Figma Icon-Alert) */

  /* ------------------------------------------------------------------ */
  /* SHAPE — Archita audit spec                                         */
  /* ------------------------------------------------------------------ */
  --radius-xxs:  4px;       /* Chips */
  --radius-xs:   6px;       /* Small button, Selectors, Alerts, Inputs */
  --radius-min:  6px;       /* alias of --radius-xs for back-compat */
  --radius-sm:   8px;       /* Medium/Large button, Accordions */
  --radius-m:    10px;      /* Containers (NEW per audit) */
  --radius-md:   12px;      /* retained alias */
  --radius-mobile-lg: 14px; /* Large mobile — bottom sheets, cards on mobile (NEW per Archita audit) */
  --radius-lg:   16px;      /* Modals */
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;     /* Contingency — onboarding-entry pill primaries */

  /* ------------------------------------------------------------------ */
  /* SHADOW / ELEVATION — flat by default. Overlays only.               */
  /* ------------------------------------------------------------------ */
  --shadow-none:        none;
  --shadow-overlay:     0 12px 32px rgba(44, 52, 70, 0.10), 0 4px 8px rgba(44, 52, 70, 0.04);
  --shadow-modal:       0 24px 48px rgba(44, 52, 70, 0.12);
  --shadow-tooltip:     0 6px 16px rgba(44, 52, 70, 0.08), 0 2px 4px rgba(44, 52, 70, 0.04);
  --shadow-focus:       0 0 0 4px rgba(0, 151, 219, 0.25);
  --shadow-focus-error: 0 0 0 4px rgba(229, 72, 77, 0.25);

  /* Legacy — DO NOT USE on buttons/cards/inputs */
  --shadow-xs: var(--shadow-none);
  --shadow-sm: var(--shadow-none);
  --shadow-md: var(--shadow-tooltip);
  --shadow-lg: var(--shadow-overlay);
  --shadow-xl: var(--shadow-modal);

  /* ------------------------------------------------------------------ */
  /* SPACING                                                            */
  /* ------------------------------------------------------------------ */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-2-5: 10px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-button: 300ms;
  --dur-slow: 320ms;
}

/* ========================================================================
   BASE / SEMANTIC ELEMENT STYLES
   ======================================================================== */
html, body {
  font-family: var(--font-brand);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 { font-family: var(--font-brand); font-weight: var(--fw-semibold); font-size: var(--fs-h1); line-height: var(--lh-heading); color: var(--text-primary); margin: 0; }
h2, .h2 { font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--text-primary); margin: 0; }
h3, .h3 { font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--text-primary); margin: 0; }
h4, .h4 { font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-heading); color: var(--text-primary); margin: 0; }

p, .body { font-weight: var(--fw-semilight); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); margin: 0; }
.body-lg { font-weight: var(--fw-semilight); font-size: var(--fs-body-lg); line-height: 1.55; }
.body-strong { font-weight: var(--fw-semibold); }
small, .caption { font-size: var(--fs-caption); font-weight: var(--fw-semilight); line-height: 1.5; color: var(--text-secondary); }
.body-sm { font-size: var(--fs-body-sm); font-weight: var(--fw-semilight); line-height: 1.5; color: var(--text-primary); }
.body-xs { font-size: var(--fs-body-xs); font-weight: var(--fw-semilight); line-height: 1.5; color: var(--text-secondary); }
a { color: var(--text-link-1); text-decoration: none; font-weight: var(--fw-semibold); transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-link-2); text-decoration: underline; }
code, pre, .mono { font-family: var(--font-brand); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.display { font-weight: var(--fw-semibold); font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-invert); }