/* tokens.css - Sudhir Chavan Portfolio Design Tokens */

/* Self-hosted Latin woff2 Fonts */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('../fonts/archivo-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-adjusted fallbacks to reduce Cumulative Layout Shift (CLS) */
@font-face {
  font-family: 'Archivo-Fallback';
  src: local('Arial Black'), local('Arial Bold'), local('Arial');
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

@font-face {
  font-family: 'IBM-Plex-Sans-Fallback';
  src: local('Arial');
  ascent-override: 98%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 101%;
}

:root {
  --panel: #F8FAFC;
  --surface: #FFFFFF;
  --ink: #0F172A;
  --ink-soft: #475569;
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.16);
  --steel: #1E3A8A;
  --signal: #FDB913;
  --signal-ink: #0B1B3D;
  --ok: #1B7F53;
  --danger: #B3261E;
  --wash: #F1F5F9;

  --font-display: "Archivo", "Archivo-Fallback", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "IBM-Plex-Sans-Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.8125rem;   /* 13px    captions, meta */
  --step-0: 1rem;         /* 16px    body */
  --step-1: 1.25rem;      /* 20px    lead text, h4 */
  --step-2: 1.563rem;     /* 25px    h3 */
  --step-3: 1.953rem;     /* 31px    h2 (mobile) */
  --step-4: 2.441rem;     /* 39px    h2 (desktop) */
  --step-5: 3.052rem;     /* 49px    h1 (mobile) */
  --step-6: 3.815rem;     /* 61px    h1 (desktop) */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --radius-xs: 4px;
  --radius-s: 8px;        /* badges, inputs, frame chrome */
  --radius-m: 12px;       /* buttons, cards */
  --radius-l: 16px;       /* bento cards, modal frames */
  --radius-xl: 24px;      /* featured hero cards */
  --radius-round: 9999px; /* pills, lamp, avatars */

  /* Modern Executive Brand & Elevation Tokens */
  --brand-navy: #0B224E;
  --brand-navy-light: #1E3A8A;
  --brand-navy-subtle: rgba(11, 34, 78, 0.04);
  --gold-warm: #FDB913;
  --gold-deep: #D48E00;
  --gold-subtle: rgba(253, 185, 19, 0.12);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 5px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 48px -8px rgba(11, 34, 78, 0.14);
  --shadow-glow: 0 8px 24px -4px rgba(212, 142, 0, 0.28);

  --transition-fast: 0.15s ease;
  --transition-smooth: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  --measure: 65ch;        /* max line length */
  --container: 1160px;
}