/* ============================================================
   InsureBuild Design System — colors_and_type.css
   Single source of truth for color + type tokens.
   All values derive from the base palette `P`. Never hard-code
   hex outside this file. See README.md for usage notes.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* ----- Base palette P ----- */

  /* Primary — orange brand */
  --p-50:  #FFF3EC;
  --p-100: #FFE4CC;
  --p-200: #FFD0B0;
  --p-300: #FFB286;
  --p-400: #FF8C52;
  --p-500: #FF5A1F;  /* brand */
  --p-600: #F04510;
  --p-700: #D63F0A;  /* brandDeep */
  --p-800: #A83008;
  --p-900: #7A2005;

  /* Secondary — warm ink */
  --s-50:  #F5F4EE;
  --s-100: #E8E6DF;
  --s-200: #D0CEC6;
  --s-300: #B8B5AD;
  --s-400: #7A7670;  /* textTer */
  --s-500: #57554E;  /* textSec (legacy) */
  --s-600: #3D3B36;  /* textSec (current) */
  --s-700: #26241F;
  --s-800: #1A1815;
  --s-900: #3E3935;  /* text primary */

  /* Tertiary — warm off-white */
  --t-50:  #FFFFFF;  /* surface */
  --t-100: #FAFAF7;  /* bg */
  --t-200: #F5F4EE;  /* surfaceTint */

  /* Ink alphas — overlay correctly on any background */
  --ink-a04: rgba(46, 42, 39, 0.04);
  --ink-a06: rgba(46, 42, 39, 0.06);
  --ink-a08: rgba(46, 42, 39, 0.08);
  --ink-a12: rgba(46, 42, 39, 0.12);
  --ink-a16: rgba(46, 42, 39, 0.16);
  --ink-a20: rgba(46, 42, 39, 0.20);
  --ink-a50: rgba(46, 42, 39, 0.50);

  /* Partnership identifiers — designated materials only */
  --lagbis: #E87A2E;
  --casava: #6B1D3A;

  /* ----- Semantic tokens T ----- */

  /* Surfaces */
  --bg:           var(--t-100);
  --surface:      var(--t-50);
  --surface-tint: var(--t-200);

  /* Ink / text */
  --text:     var(--s-900);
  --text-sec: var(--s-600);
  --text-ter: var(--s-400);

  /* Borders */
  --border:        var(--ink-a08);
  --border-strong: var(--ink-a16);

  /* Brand */
  --brand:       var(--p-500);
  --brand-deep:  var(--p-700);
  --brand-light: var(--p-200);
  --brand-bg:    var(--p-50);

  /* Decorative accents */
  --peach: var(--p-200);
  --coral: var(--p-300);
  --cream: var(--p-50);

  /* Status — pair with icon, never hue alone */
  --success:        var(--p-700);
  --success-bg:     var(--p-50);
  --success-border: var(--p-200);

  --danger:        var(--s-900);
  --danger-bg:     var(--ink-a06);
  --danger-border: var(--ink-a20);

  --amber:        var(--p-500);
  --amber-bg:     var(--p-50);
  --amber-border: var(--p-200);

  --info:        var(--s-700);
  --info-bg:     var(--ink-a04);
  --info-border: var(--ink-a16);

  /* Composed */
  --brand-gradient: linear-gradient(135deg, var(--p-500), var(--p-700));
  --scrim:          var(--ink-a50);

  /* ----- Shape — pill convention for InsureBuild ----- */
  --radius-pill:    999px;
  --radius-card:    16px;
  --radius-surface: 12px;
  --radius-sm:      8px;
  --radius-xs:      6px;

  /* Staff Portal override — rounded (operator-facing) */
  --radius-staff-control: 8px;
  --radius-staff-card:    12px;

  /* ----- Spacing scale ----- */
  --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;

  /* ----- Elevation — warm-ink shadows, low-contrast ----- */
  --shadow-xs: 0 1px 2px var(--ink-a06);
  --shadow-sm: 0 1px 3px var(--ink-a08), 0 1px 2px var(--ink-a04);
  --shadow-md: 0 4px 12px var(--ink-a08), 0 2px 4px var(--ink-a04);
  --shadow-lg: 0 12px 32px var(--ink-a12), 0 4px 8px var(--ink-a06);
  --shadow-modal: 0 24px 64px var(--ink-a20), 0 8px 16px var(--ink-a08);
  --shadow-focus: 0 0 0 4px var(--brand-light);

  /* ----- Typography ----- */
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'DM Serif Display', 'DM Sans', Georgia, serif;

  /* Type scale (applied at component level, not as global tokens —
     these are convenience refs for prototyping). */
  --fs-display-xl: 56px;
  --fs-display-lg: 48px;
  --fs-display-md: 36px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-body-lg: 17px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-eyebrow: 11px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.08em;

  /* ----- Motion ----- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   Semantic element styles — opinionated defaults.
   Apply by attaching the class or relying on the element tag.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, .display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text);
}
.display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.display-md { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }

h1, .h1 { font-family: var(--font-body); font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--text); }
h2, .h2 { font-family: var(--font-body); font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); color: var(--text); }
h3, .h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); color: var(--text); }

p, .body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--text-sec); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-sec);
}

.label {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-sec);
}

a { color: var(--brand-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--brand-light); color: var(--text); }