/* MartinsConnect Design System — Colors & Type */
/* Maritime Precision: Navy #003566 + Gold #F5CC00 */
/* Extracted from martinsconnect-ui/css/design-tokens.css v3.0 */

/* =========================================================
   FONT FACES — DM Sans (UI) + Fira Code (mono)
   Fonts live in ../assets/fonts/ (woff2); Latin + Latin-ext covered.
   ========================================================= */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/fira-code-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/fira-code-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F;
}

:root {
  /* =========================================================
     BRAND — Navy (structure/trust) + Gold (importance/value)
     ========================================================= */
  --navy-900: #001D3D;
  --navy-800: #002952;
  --navy-700: #003566;  /* Primary brand navy */
  --navy-600: #004080;
  --navy-500: #0059B3;
  --navy-400: #3385CC;
  --navy-300: #66A3D9;
  --navy-200: #99C2E6;
  --navy-100: #CCE0F2;
  --navy-50:  #E6F0F9;

  --gold-600: #B8930F;
  --gold-500: #D4A51A;
  --gold-400: #F5CC00;  /* Primary brand gold */
  --gold-300: #FFD633;
  --gold-200: #FFE066;
  --gold-100: #FFF0A3;
  --gold-50:  #FFFBE6;

  /* =========================================================
     NEUTRALS — warm slate with blue undertone
     ========================================================= */
  --slate-950: #0C1222;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;

  /* =========================================================
     SEMANTIC — success/danger/warning/info
     ========================================================= */
  --success-600: #059669; --success-500: #10B981; --success-400: #34D399; --success-100: #D1FAE5;
  --danger-600:  #DC2626; --danger-500:  #EF4444; --danger-400:  #F87171; --danger-100:  #FEE2E2;
  --warning-600: #D97706; --warning-500: #F59E0B; --warning-400: #FBBF24; --warning-100: #FEF3C7;
  --info-600:    #0284C7; --info-500:    #0EA5E9; --info-400:    #38BDF8; --info-100:    #E0F2FE;

  /* =========================================================
     SEMANTIC ALIASES — light mode default
     ========================================================= */
  --color-bg: var(--slate-50);
  --color-bg-alt: #FDFEFF;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-overlay: rgba(255, 255, 255, 0.95);

  --color-border: var(--slate-200);
  --color-border-subtle: var(--slate-100);
  --color-border-strong: var(--slate-300);

  --color-text-primary:   var(--slate-900);
  --color-text-secondary: var(--slate-600);
  --color-text-muted:     var(--slate-500);
  --color-text-inverse:   #FFFFFF;

  --color-brand:        var(--navy-700);
  --color-brand-light:  var(--navy-50);
  --color-brand-hover:  var(--navy-800);
  --color-accent:       var(--gold-400);
  --color-accent-hover: var(--gold-500);
  --color-accent-subtle: var(--gold-50);

  --color-success: var(--success-500); --color-success-bg: var(--success-100); --color-success-text: #047857;
  --color-danger:  var(--danger-500);  --color-danger-bg:  var(--danger-100);  --color-danger-text:  #B91C1C;
  --color-warning: var(--warning-500); --color-warning-bg: var(--warning-100); --color-warning-text: #B45309;
  --color-info:    var(--info-500);    --color-info-bg:    var(--info-100);    --color-info-text:    #0369A1;
  --color-accent-text: #7D6200;

  /* Strong semantic text tones — for tinted-bg labels needing higher contrast */
  --color-success-text-strong: #14532d;
  --color-warning-text-strong: #713f12;
  --color-danger-text-strong:  #7f1d1d;

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
  --font-sans:    var(--font-body);

  --text-2xs:  0.6875rem;  /* 11 */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-md:   0.9375rem;  /* 15 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-stat: 1.625rem;   /* 26 — exact stat-value */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide:  0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.08em;

  /* =========================================================
     SEMANTIC TYPE ROLES — h1..h6, p, code, caption
     Map directly to heading elements for consistency.
     ========================================================= */
  --h1-size: var(--text-4xl);  --h1-weight: 700; --h1-leading: 1.15; --h1-tracking: -0.025em;
  --h2-size: var(--text-3xl);  --h2-weight: 700; --h2-leading: 1.2;  --h2-tracking: -0.02em;
  --h3-size: var(--text-2xl);  --h3-weight: 600; --h3-leading: 1.25; --h3-tracking: -0.015em;
  --h4-size: var(--text-xl);   --h4-weight: 600; --h4-leading: 1.3;  --h4-tracking: -0.01em;
  --h5-size: var(--text-lg);   --h5-weight: 600; --h5-leading: 1.4;
  --h6-size: var(--text-base); --h6-weight: 500; --h6-leading: 1.4;
  --body-size: var(--text-base); --body-weight: 400; --body-leading: 1.5;
  --caption-size: var(--text-xs); --caption-weight: 500; --caption-tracking: 0.025em;
  --code-size: 0.9em;
}

[data-theme="dark"] {
  --color-bg: var(--slate-950);
  --color-bg-alt: var(--slate-900);
  --color-surface: var(--slate-900);
  --color-surface-raised: var(--slate-800);

  --color-border: var(--slate-700);
  --color-border-subtle: var(--slate-800);
  --color-border-strong: var(--slate-600);

  --color-text-primary:   var(--slate-100);
  --color-text-secondary: var(--slate-400);
  --color-text-muted:     #94A3B8;
  --color-text-inverse:   var(--slate-900);

  --color-brand:       var(--navy-400);  /* recedes into structure */
  --color-brand-light: var(--navy-900);
  --color-brand-hover: var(--navy-300);
  --color-accent:       var(--gold-400); /* gold becomes primary accent */
  --color-accent-hover: var(--gold-300);
  --color-accent-subtle: rgba(245, 204, 0, 0.1);

  --color-success: var(--success-400); --color-success-bg: rgba(16,185,129,0.15); --color-success-text: #34D399;
  --color-danger:  var(--danger-400);  --color-danger-bg:  rgba(239,68,68,0.15);  --color-danger-text:  #F87171;
  --color-warning: var(--warning-400); --color-warning-bg: rgba(245,158,11,0.15); --color-warning-text: #FBBF24;
  --color-info:    var(--info-400);    --color-info-bg:    rgba(14,165,233,0.15); --color-info-text:    #38BDF8;
  --color-accent-text: var(--gold-400);
  color-scheme: dark;
}

/* =========================================================
   ROLE-BASED ELEMENT MAPPING
   ========================================================= */
body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin: 0;
}
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-leading); letter-spacing: var(--h1-tracking); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-leading); letter-spacing: var(--h2-tracking); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-leading); letter-spacing: var(--h3-tracking); }
h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-leading); }
h5 { font-size: var(--h5-size); font-weight: var(--h5-weight); line-height: var(--h5-leading); }
h6 { font-size: var(--h6-size); font-weight: var(--h6-weight); line-height: var(--h6-leading); }
p  { color: var(--color-text-secondary); line-height: var(--body-leading); }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: var(--code-size); }
.caption, small.caption {
  font-size: var(--caption-size);
  font-weight: var(--caption-weight);
  letter-spacing: var(--caption-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}