/* ─────────────────────────────────────────────────────────────
   Sivan Design — Foundations
   Colors, type, spacing, radius, shadow, motion.
   Source: SivanDesign_BrandKit.docx (v1.0, May 2026)
   ───────────────────────────────────────────────────────────── */

/* Webfont fallbacks for digital/web contexts.
   The brand kit specifies Arial as the primary font for documents
   and presentations. DM Sans is the sole web equivalent — used for
   both body and display. No serif face is used in the system. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

:root {
  /* ── Brand Colors ───────────────────────────────────────── */
  --sd-orange:       #E8621A;   /* sole brand accent */
  --sd-dark:         #2A2A28;   /* primary text, strength */
  --sd-blue:         #1B5EAD;   /* product / tech / data */
  --sd-white:        #F0EFEC;   /* warm white */

  /* ── Neutrals / Secondary ───────────────────────────────── */
  --sd-mid-gray:     #4A4A46;
  --sd-off-white:    #F7F6F3;   /* preferred panel/callout bg */
  --sd-blue-light:   #2E7DD4;
  --sd-cool-gray:    #BDC5C8;

  /* ── Orange Tint Scale ──────────────────────────────────── */
  --orange-50:   #FFF4EC;
  --orange-100:  #FFE2CD;
  --orange-200:  #FCC59A;
  --orange-300:  #F5A268;
  --orange-500:  #E8621A;       /* base */
  --orange-700:  #B94A11;
  --orange-900:  #7A2F08;

  /* ── Blue Tint Scale (derived from SD Blue) ─────────────── */
  --blue-50:   #EAF2FB;
  --blue-100:  #CFE0F4;
  --blue-200:  #9DC1E9;
  --blue-300:  #5E97D8;
  --blue-500:  #1B5EAD;         /* base */
  --blue-700:  #134680;
  --blue-900:  #0B2A4D;

  /* ── Dark Neutral Scale ─────────────────────────────────── */
  --ink-50:    #F7F6F3;
  --ink-100:   #ECEBE6;
  --ink-200:   #D5D4CE;
  --ink-300:   #A8A7A1;
  --ink-400:   #6E6E69;
  --ink-500:   #4A4A46;
  --ink-700:   #2A2A28;
  --ink-900:   #15151415;

  /* ── Semantic Tokens ────────────────────────────────────── */
  --fg-1:        var(--sd-dark);       /* body / primary text */
  --fg-2:        var(--ink-500);       /* secondary text */
  --fg-3:        var(--ink-400);       /* muted, captions */
  --fg-accent:   var(--sd-orange);
  --fg-link:     var(--sd-blue);
  --fg-on-dark:  #FFFFFF;

  --bg-page:     var(--sd-off-white);
  --bg-surface:  #FFFFFF;
  --bg-panel:    var(--sd-off-white);
  --bg-inverse:  var(--sd-dark);
  --bg-tint:     var(--orange-50);

  --border-1:    var(--ink-200);
  --border-2:    var(--ink-300);
  --border-strong: var(--sd-dark);

  --status-success: #2D8A4E;
  --status-warning: #C28210;
  --status-danger:  #C0392B;
  --status-info:    var(--sd-blue);

  /* ── Typography ─────────────────────────────────────────── */
  --font-primary: "DM Sans", Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-display: "DM Sans", Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif; /* same family, weight does the work */
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-bold:    700;       /* brand kit limits weights to Regular + Bold */

  /* Document-grade scale (8/9/11/14/18/24/32pt → px @ 96dpi) */
  --fs-display:  32px;     /* Display / Hero */
  --fs-h1:       24px;
  --fs-h2:       18px;
  --fs-h3:       14px;
  --fs-body:     15px;     /* slightly larger than print 11pt for screen */
  --fs-small:    13px;
  --fs-caption:  12px;
  --fs-eyebrow:  11px;

  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.55;

  --tracking-eyebrow: 0.14em;
  --tracking-tight:   -0.01em;

  /* ── Spacing (8-pt grid) ────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;

  /* ── Corner Radii ───────────────────────────────────────── */
  --radius-sm:  4px;   /* badges, pills, inline tags */
  --radius-md:  6px;   /* buttons, inputs */
  --radius-lg:  10px;  /* cards, panels, modals */
  --radius-xl:  16px;  /* hero cards, feature tiles */
  --radius-full: 999px;

  /* ── Borders ────────────────────────────────────────────── */
  --border-w:    1px;
  --border-w-2:  2px;

  /* ── Shadows (restrained; the brand avoids drop-shadows on
     brand elements — these are reserved for UI surfaces) ───── */
  --shadow-sm:  0 1px 2px rgba(42,42,40,0.06);
  --shadow-md:  0 2px 6px rgba(42,42,40,0.08), 0 1px 2px rgba(42,42,40,0.04);
  --shadow-lg:  0 8px 24px rgba(42,42,40,0.10), 0 2px 6px rgba(42,42,40,0.06);
  --shadow-focus: 0 0 0 3px rgba(232,98,26,0.30);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --dur-snap:       80ms;   /* button clicks, toggles */
  --dur-transition: 200ms;  /* hover, dropdowns, tabs */
  --dur-reveal:     350ms;  /* modals, page load, map layers */
}

/* ─────────────────────────────────────────────────────────────
   Base reset + typography defaults
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0 0 var(--space-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h1); }
h3 { font-size: var(--fs-h2); }
h4 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--space-md); }

small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-transition) var(--ease-in-out);
}
a:hover { color: var(--blue-700); text-decoration: underline; }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }