/* =============================================================
   Livriz · Folio Design System
   Tokens: Material Design 3 · Black & White · Accent #0047bb
   ============================================================= */

/* Fonts: Poppins via Google Fonts + Material Symbols (Rounded) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&display=block');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ─── Brand ─────────────────────────────────────────────── */
  --brand-accent: #0047bb;        /* Livriz Blue (from logo mark) - the only chromatic color in the system */
  --brand-accent-hover: #1638CC;
  --brand-accent-pressed: #102BA3;
  --brand-accent-soft: #E8EDFE;   /* tinted surface */
  --brand-accent-on: #FFFFFF;     /* foreground on accent */

  /* ─── Neutrals (Black & White core) ─────────────────────── */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #FAFAFA;
  --neutral-100:  #F4F4F4;
  --neutral-200:  #E8E8E8;
  --neutral-300:  #D6D6D6;
  --neutral-400:  #B8B8B8;
  --neutral-500:  #909090;
  --neutral-600:  #6B6B6B;
  --neutral-700:  #4A4A4A;
  --neutral-800:  #2A2A2A;
  --neutral-900:  #141414;
  --neutral-1000: #000000;

  /* ─── M3 Semantic Tokens (Light scheme) ─────────────────── */
  --md-sys-color-primary:           var(--brand-accent);
  --md-sys-color-on-primary:        #FFFFFF;
  --md-sys-color-primary-container: var(--brand-accent-soft);
  --md-sys-color-on-primary-container: #0A1A66;

  --md-sys-color-secondary:         #000000;
  --md-sys-color-on-secondary:      #FFFFFF;
  --md-sys-color-secondary-container: #F4F4F4;
  --md-sys-color-on-secondary-container: #141414;

  --md-sys-color-surface:           #FFFFFF;
  --md-sys-color-surface-dim:       #F4F4F4;
  --md-sys-color-surface-bright:    #FFFFFF;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low:    #FAFAFA;
  --md-sys-color-surface-container:        #F4F4F4;
  --md-sys-color-surface-container-high:   #ECECEC;
  --md-sys-color-surface-container-highest:#E4E4E4;
  --md-sys-color-on-surface:        #141414;
  --md-sys-color-on-surface-variant: #4A4A4A;

  --md-sys-color-outline:           #B8B8B8;
  --md-sys-color-outline-variant:   #E8E8E8;

  --md-sys-color-inverse-surface:   #2A2A2A;
  --md-sys-color-inverse-on-surface:#FAFAFA;
  --md-sys-color-inverse-primary:   #A5B6FA;

  --md-sys-color-scrim:             rgba(0,0,0,0.5);
  --md-sys-color-shadow:            rgba(0,0,0,1);

  /* Status (still neutral — color reserved for "live" alerts only) */
  --md-sys-color-error:             #000000;
  --md-sys-color-on-error:          #FFFFFF;
  --md-sys-color-error-container:   #F4F4F4;
  --md-sys-color-on-error-container:#141414;

  /* ─── Status palette ────────────────────────────────────── */
  /* Functional colour for moments where words alone aren't enough:    */
  /* destructive actions, form validation, billing failures, banners.  */
  /* All hues are desaturated to live next to Livriz Blue. The rules:  */
  /*  · copy carries the urgency, colour confirms it (never the other  */
  /*    way around);                                                   */
  /*  · the saturated value is for text, icon, and border only — never */
  /*    a full-bleed surface;                                          */
  /*  · the `-soft` variant is the only one allowed as a banner /chip  */
  /*    background;                                                    */
  /*  · `info` reuses the brand accent on purpose — we do not invent a */
  /*    fourth chromatic hue.                                          */
  /*  · <10 % of any screen is status colour (same rule as the accent).*/

  --status-danger:       #C8200C;
  --status-danger-hover: #A41809;
  --status-danger-soft:  #FBE9E6;
  --status-on-danger:    #FFFFFF;

  --status-warning:      #B7791F;
  --status-warning-hover:#955F15;
  --status-warning-soft: #FBF1DE;
  --status-on-warning:   #FFFFFF;

  --status-success:      #1F8A5B;
  --status-success-hover:#176C47;
  --status-success-soft: #E4F4EB;
  --status-on-success:   #FFFFFF;

  --status-info:         var(--brand-accent);
  --status-info-hover:   var(--brand-accent-hover);
  --status-info-soft:    var(--brand-accent-soft);
  --status-on-info:      #FFFFFF;

  /* ─── Foreground / Background Roles ─────────────────────── */
  --fg-1: var(--neutral-1000);     /* primary text */
  --fg-2: var(--neutral-700);      /* secondary text */
  --fg-3: var(--neutral-500);      /* tertiary text, placeholders */
  --fg-disabled: var(--neutral-400);
  --fg-accent: var(--brand-accent);
  --fg-inverse: var(--neutral-0);

  --bg-1: var(--neutral-0);        /* base canvas */
  --bg-2: var(--neutral-50);       /* subtle surface */
  --bg-3: var(--neutral-100);      /* raised surface */
  --bg-4: var(--neutral-200);      /* recessed / well */
  --bg-inverse: var(--neutral-1000);

  --border-1: var(--neutral-200);  /* default divider */
  --border-2: var(--neutral-300);  /* stronger border */
  --border-strong: var(--neutral-1000);

  /* ─── Type Family ───────────────────────────────────────── */
  --font-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-icons: 'Material Symbols Rounded';
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── M3 Type Scale (Poppins) ───────────────────────────── */
  /* Display */
  --type-display-l-size: 57px;  --type-display-l-line: 64px;  --type-display-l-weight: 600; --type-display-l-tracking: -0.25px;
  --type-display-m-size: 45px;  --type-display-m-line: 52px;  --type-display-m-weight: 600; --type-display-m-tracking: 0px;
  --type-display-s-size: 36px;  --type-display-s-line: 44px;  --type-display-s-weight: 600; --type-display-s-tracking: 0px;
  /* Headline */
  --type-headline-l-size: 32px; --type-headline-l-line: 40px; --type-headline-l-weight: 600; --type-headline-l-tracking: 0px;
  --type-headline-m-size: 28px; --type-headline-m-line: 36px; --type-headline-m-weight: 600; --type-headline-m-tracking: 0px;
  --type-headline-s-size: 24px; --type-headline-s-line: 32px; --type-headline-s-weight: 600; --type-headline-s-tracking: 0px;
  /* Title */
  --type-title-l-size: 22px;    --type-title-l-line: 28px;    --type-title-l-weight: 600; --type-title-l-tracking: 0px;
  --type-title-m-size: 16px;    --type-title-m-line: 24px;    --type-title-m-weight: 600; --type-title-m-tracking: 0.15px;
  --type-title-s-size: 14px;    --type-title-s-line: 20px;    --type-title-s-weight: 600; --type-title-s-tracking: 0.1px;
  /* Body */
  --type-body-l-size: 16px;     --type-body-l-line: 24px;     --type-body-l-weight: 400; --type-body-l-tracking: 0.5px;
  --type-body-m-size: 14px;     --type-body-m-line: 20px;     --type-body-m-weight: 400; --type-body-m-tracking: 0.25px;
  --type-body-s-size: 12px;     --type-body-s-line: 16px;     --type-body-s-weight: 400; --type-body-s-tracking: 0.4px;
  /* Label */
  --type-label-l-size: 14px;    --type-label-l-line: 20px;    --type-label-l-weight: 500; --type-label-l-tracking: 0.1px;
  --type-label-m-size: 12px;    --type-label-m-line: 16px;    --type-label-m-weight: 500; --type-label-m-tracking: 0.5px;
  --type-label-s-size: 11px;    --type-label-s-line: 16px;    --type-label-s-weight: 500; --type-label-s-tracking: 0.5px;

  /* ─── Spacing (4px base) ────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─── M3 Shape (Corner Radius) ──────────────────────────── */
  --radius-none:    0;
  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-xl:      28px;
  --radius-full:    9999px;

  /* ─── M3 Elevation (mono shadows) ───────────────────────── */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --elev-2: 0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --elev-3: 0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --elev-4: 0 8px 16px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.04);
  --elev-5: 0 16px 32px rgba(0,0,0,0.12), 0 8px 12px rgba(0,0,0,0.04);

  /* ─── Motion (M3 emphasized) ────────────────────────────── */
  --motion-easing-standard:   cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --motion-easing-decelerate: cubic-bezier(0, 0, 0, 1); /* @kind other */
  --motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1); /* @kind other */
  --motion-duration-short:    150ms; /* @kind other */
  --motion-duration-medium:   250ms; /* @kind other */
  --motion-duration-long:     400ms; /* @kind other */

  /* ─── Focus ring ────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--brand-accent);
}

/* ═══════════════════════════════════════════════════════════
   Dark scheme — opt-in via [data-theme="dark"] on <html>.
   The system is authored light-first (Black & White + one accent);
   this is the semantic mirror. Only token-driven surfaces adapt —
   deliverables that hardcode #fff/#141414 stay as authored.
   ═══════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --brand-accent: #6E95F5;
  --brand-accent-hover: #86A8F7;
  --brand-accent-pressed: #5E88F3;
  --brand-accent-soft: rgba(110,149,245,0.20);
  --brand-accent-on: #0A1330;          /* dark ink on the (light) accent fill */

  --md-sys-color-primary:           var(--brand-accent);
  --md-sys-color-on-primary:        #0A1330;
  --md-sys-color-primary-container: rgba(110,149,245,0.20);
  --md-sys-color-on-primary-container: #DCE5FF;

  --md-sys-color-secondary:         #FFFFFF;
  --md-sys-color-on-secondary:      #141414;
  --md-sys-color-secondary-container: #262626;
  --md-sys-color-on-secondary-container: #ECECEC;

  --md-sys-color-surface:           #121212;
  --md-sys-color-surface-dim:       #0E0E0E;
  --md-sys-color-surface-bright:    #2A2A2A;
  --md-sys-color-surface-container-lowest: #181818;
  --md-sys-color-surface-container-low:    #1C1C1C;
  --md-sys-color-surface-container:        #202020;
  --md-sys-color-surface-container-high:   #282828;
  --md-sys-color-surface-container-highest:#303030;
  --md-sys-color-on-surface:        #ECECEC;
  --md-sys-color-on-surface-variant: #C4C4C4;

  --md-sys-color-outline:           #6B6B6B;
  --md-sys-color-outline-variant:   #333333;

  --md-sys-color-inverse-surface:   #E4E4E4;
  --md-sys-color-inverse-on-surface:#202020;
  --md-sys-color-inverse-primary:   #23408F;

  --md-sys-color-scrim:             rgba(0,0,0,0.6);

  --md-sys-color-error:             #FFFFFF;
  --md-sys-color-on-error:          #141414;
  --md-sys-color-error-container:   #262626;
  --md-sys-color-on-error-container:#ECECEC;

  /* Status — lightened for dark surfaces (saturated value = text/icon/border only) */
  --status-danger:       #F26A5A;
  --status-danger-hover: #FF7A6B;
  --status-danger-soft:  rgba(242,106,90,0.20);
  --status-on-danger:    #141414;

  --status-warning:      #E3A94E;
  --status-warning-hover:#EFB85E;
  --status-warning-soft: rgba(227,169,78,0.22);
  --status-on-warning:   #141414;

  --status-success:      #4CBE8A;
  --status-success-hover:#57C994;
  --status-success-soft: rgba(76,190,138,0.20);
  --status-on-success:   #141414;

  --status-info:         var(--brand-accent);
  --status-info-hover:   var(--brand-accent-hover);
  --status-info-soft:    var(--brand-accent-soft);
  --status-on-info:      #0A1330;

  --fg-1: #F4F4F4;
  --fg-2: #C4C4C4;
  --fg-3: #8A8A8A;
  --fg-disabled: #6E6E6E;
  --fg-accent: var(--brand-accent);
  --fg-inverse: #141414;

  --bg-1: #121212;
  --bg-2: #181818;
  --bg-3: #202020;
  --bg-4: #282828;
  --bg-inverse: #F4F4F4;

  --border-1: #2A2A2A;
  --border-2: #3A3A3A;
  --border-strong: #FFFFFF;

  --elev-1: 0 1px 2px rgba(0,0,0,0.40), 0 1px 1px rgba(0,0,0,0.30);
  --elev-2: 0 2px 4px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --elev-3: 0 4px 8px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.30);
  --elev-4: 0 8px 16px rgba(0,0,0,0.50), 0 4px 6px rgba(0,0,0,0.30);
  --elev-5: 0 16px 32px rgba(0,0,0,0.55), 0 8px 12px rgba(0,0,0,0.35);
}

/* ─── Base reset (light only — system is monochromatic) ──── */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Semantic Type Classes ─────────────────────────────── */
.display-l { font: var(--type-display-l-weight) var(--type-display-l-size)/var(--type-display-l-line) var(--font-sans); letter-spacing: var(--type-display-l-tracking); }
.display-m { font: var(--type-display-m-weight) var(--type-display-m-size)/var(--type-display-m-line) var(--font-sans); letter-spacing: var(--type-display-m-tracking); }
.display-s { font: var(--type-display-s-weight) var(--type-display-s-size)/var(--type-display-s-line) var(--font-sans); letter-spacing: var(--type-display-s-tracking); }
.headline-l, h1 { font: var(--type-headline-l-weight) var(--type-headline-l-size)/var(--type-headline-l-line) var(--font-sans); letter-spacing: var(--type-headline-l-tracking); margin: 0; }
.headline-m, h2 { font: var(--type-headline-m-weight) var(--type-headline-m-size)/var(--type-headline-m-line) var(--font-sans); letter-spacing: var(--type-headline-m-tracking); margin: 0; }
.headline-s, h3 { font: var(--type-headline-s-weight) var(--type-headline-s-size)/var(--type-headline-s-line) var(--font-sans); letter-spacing: var(--type-headline-s-tracking); margin: 0; }
.title-l,    h4 { font: var(--type-title-l-weight) var(--type-title-l-size)/var(--type-title-l-line) var(--font-sans); letter-spacing: var(--type-title-l-tracking); margin: 0; }
.title-m,    h5 { font: var(--type-title-m-weight) var(--type-title-m-size)/var(--type-title-m-line) var(--font-sans); letter-spacing: var(--type-title-m-tracking); margin: 0; }
.title-s,    h6 { font: var(--type-title-s-weight) var(--type-title-s-size)/var(--type-title-s-line) var(--font-sans); letter-spacing: var(--type-title-s-tracking); margin: 0; }
.body-l,     p  { font: var(--type-body-l-weight) var(--type-body-l-size)/var(--type-body-l-line) var(--font-sans); letter-spacing: var(--type-body-l-tracking); margin: 0; }
.body-m         { font: var(--type-body-m-weight) var(--type-body-m-size)/var(--type-body-m-line) var(--font-sans); letter-spacing: var(--type-body-m-tracking); }
.body-s         { font: var(--type-body-s-weight) var(--type-body-s-size)/var(--type-body-s-line) var(--font-sans); letter-spacing: var(--type-body-s-tracking); }
.label-l        { font: var(--type-label-l-weight) var(--type-label-l-size)/var(--type-label-l-line) var(--font-sans); letter-spacing: var(--type-label-l-tracking); }
.label-m        { font: var(--type-label-m-weight) var(--type-label-m-size)/var(--type-label-m-line) var(--font-sans); letter-spacing: var(--type-label-m-tracking); text-transform: none; }
.label-s        { font: var(--type-label-s-weight) var(--type-label-s-size)/var(--type-label-s-line) var(--font-sans); letter-spacing: var(--type-label-s-tracking); }

code, .mono { font-family: var(--font-mono); font-size: 13px; }

/* Material Symbols base */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ─── Scrollbars · MD3 ──────────────────────────────────────────
   Base: defaults M3 del Scrollbar de Material (grosor 8px desktop /
   4px táctil, radio 8px, track transparente, estados hover/arrastre).
   Opacidades corridas del default M3 (38/50/60) a 48/60/70: el 38%
   no alcanza el 3:1 de WCAG 1.4.11 para componentes UI (2.4:1 en
   claro, 3.2:1 justo en oscuro). Con 48%: 3.3:1 claro · 4.4:1 oscuro. */
* {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: color-mix(in srgb, var(--md-sys-color-on-surface) 48%, transparent) transparent;
}
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 48%, transparent);
  border-radius: 8px;
  min-height: 48px; min-width: 48px;
}
::-webkit-scrollbar-thumb:hover  { background: color-mix(in srgb, var(--md-sys-color-on-surface) 60%, transparent); }
::-webkit-scrollbar-thumb:active { background: color-mix(in srgb, var(--md-sys-color-on-surface) 70%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@media (pointer: coarse) {
  ::-webkit-scrollbar { width: 4px; height: 4px; }  /* 4px en mobile */
}