/* Clarity Codes — bundled tokens */

/* ===== Clarity Codes — Webfonts ===== */

@font-face {
  font-family: "Good Times";
  src: url("assets/fonts/GoodTimes-Regular.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proxima Nova";
  src: url("assets/fonts/ProximaNova-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Artegra Sans";
  src: url("assets/fonts/ArtegraSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cornerstone";
  src: url("assets/fonts/Cornerstone.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =====================================================================
   Clarity Codes — Color Tokens
   ===================================================================== */
:root {
  --azure-900: #00256a;
  --azure-800: #003494;
  --azure-700: #003fae;
  --azure:     #004ac3;
  --azure-500: #1a5fd0;
  --azure-300: #6f96e3;
  --azure-200: #aac2ef;
  --azure-100: #d8e3f9;
  --azure-50:  #eef3fd;

  --capri-900: #005a80;
  --capri-700: #0084bd;
  --capri:     #009fe3;
  --capri-400: #3fb8ec;
  --capri-200: #a6e0f7;
  --capri-100: #d6f1fc;
  --capri-50:  #ecf9fe;

  --grad-brand: linear-gradient(100deg, var(--azure) 0%, var(--capri) 100%);
  --grad-brand-soft: linear-gradient(135deg, var(--azure-50) 0%, var(--capri-50) 100%);

  --ink-900: #0a0e1a;
  --ink-800: #161b2b;
  --ink-700: #2b3140;
  --ink-600: #444b5c;
  --ink-500: #646b7d;
  --ink-400: #8b93a3;
  --ink-300: #b4bbc8;
  --ink-200: #d6dbe3;
  --ink-150: #e6e9ee;
  --ink-100: #f0f2f6;
  --ink-50:  #f7f8fb;
  --white:   #ffffff;

  --authentic:       #1aa564;
  --authentic-700:   #137a4a;
  --authentic-bg:    #e6f6ee;
  --counterfeit:     #e02424;
  --counterfeit-700: #b11717;
  --counterfeit-bg:  #fdeaea;
  --caution:         #f5a623;
  --caution-700:     #b87410;
  --caution-bg:      #fdf3e2;
  --info:            var(--capri);
  --info-bg:         var(--capri-50);

  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-inverse:  var(--white);
  --text-brand:    var(--azure);
  --text-link:     var(--azure);

  --surface-page:  var(--ink-50);
  --surface-card:  var(--white);
  --surface-sunken:var(--ink-100);
  --surface-brand: var(--azure);
  --surface-ink:   var(--ink-900);

  --border-subtle: var(--ink-150);
  --border-default:var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand:  var(--azure);

  --focus-ring:    var(--capri);
}

/* =====================================================================
   Clarity Codes — Typography Tokens
   ===================================================================== */
:root {
  --font-display: "Good Times", "Arial Narrow", sans-serif;
  --font-heading: "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Artegra Sans", "Helvetica Neue", Arial, sans-serif;
  --font-alt:     "Cornerstone", var(--font-display);
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.25rem;
  --text-xl:  1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-4xl: 3.75rem;
  --text-5xl: 5rem;

  --fw-body:    500;
  --fw-heading: 700;
  --fw-display: 400;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-display:  0.06em;
  --ls-label:    0.14em;
  --ls-tight:   -0.01em;
  --ls-normal:   0;
  --ls-code:     0.12em;
}

/* =====================================================================
   Clarity Codes — Spacing, Radius, Elevation, Motion
   ===================================================================== */
:root {
  --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;
  --space-32: 128px;

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-full: 50%;

  --border-width: 1px;
  --border-width-strong: 1.5px;
  --border-width-heavy: 2px;

  --shadow-xs:  0 1px 2px rgba(0, 37, 106, 0.06);
  --shadow-sm:  0 1px 3px rgba(0, 37, 106, 0.08), 0 1px 2px rgba(0, 37, 106, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 37, 106, 0.10), 0 2px 4px rgba(0, 37, 106, 0.06);
  --shadow-lg:  0 12px 28px rgba(0, 37, 106, 0.14), 0 4px 8px rgba(0, 37, 106, 0.06);
  --shadow-xl:  0 24px 56px rgba(0, 37, 106, 0.18);
  --shadow-brand: 0 12px 32px rgba(0, 74, 195, 0.28);
  --shadow-inset: inset 0 1px 2px rgba(0, 37, 106, 0.08);

  --ring-width: 3px;
  --ring-color: rgba(0, 159, 227, 0.45);

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  --container:  1200px;
  --container-narrow: 760px;
  --gutter:     var(--space-6);
}