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

/* 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');

:root {
  /* ─── Brand ─────────────────────────────────────────────── */
  --brand-accent: #1D46F2;        /* 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);
  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --motion-duration-short:    150ms;
  --motion-duration-medium:   250ms;
  --motion-duration-long:     400ms;

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

/* ─── 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;
}