/* =====================================================================
   Devmy — Colors & Type Foundations
   Sourced from the Figma library "[Devmy] eCommerce Demo.fig" — page
   /Foundations/Tokens. Color names follow shadcn/ui semantic naming
   used in the Figma collection.
   ===================================================================== */

/* --- Webfonts -------------------------------------------------------- */
/* NOTE: @import rules MUST come before every other rule (incl. @font-face),
   otherwise the browser ignores them and Satoshi / IBM Plex Mono never load,
   silently falling back to a system font. Keep these two lines at the top. */
/* Satoshi (body) via Fontshare. IBM Plex Mono via Google. */
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");

/* Space Grotesk — self-hosted variable font (display) */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand palette (from /Foundations/Tokens/Colors) -------------- */
  --brand-orange:        #FF6600;  /* primary accent — devmy signature (logo dot) */
  --brand-orange-alt:    #FF3600;  /* brighter alt orange, used sparingly */
  --brand-black:         #191616;  /* near-black — "Brand Black" */
  --brand-blue:          #15B5FF;  /* "ring" / focus / accent-alt */
  --brand-blue-deep:     #0069FF;  /* accent-alt-foreground */
  --brand-blue-light:    #97DAE9;  /* light-cyan, used on illustrations */
  --brand-blue-pale:     #C3FBFF;  /* palest cyan, soft backgrounds */
  --brand-purple:        #9747FF;  /* used sparingly */

  /* ---- Neutrals ----------------------------------------------------- */
  --neutral-0:           #FFFFFF;
  --neutral-50:          #F7FAFC;  /* row hover, subtle bg */
  --neutral-100:         #F3F5F9;  /* light surface */
  --neutral-200:         #F0F5F9;  /* hairline borders */
  --neutral-300:         #C8C8D1;  /* muted */
  --neutral-400:         #98989F;  /* tertiary */
  --neutral-500:         #7C7B81;  /* muted-foreground */
  --neutral-600:         #56554F;  /* deep grey copy */
  --neutral-700:         #1F1F1F;
  --neutral-800:         #191616;  /* brand black */
  --neutral-900:         #000000;

  /* ---- Semantic surfaces (shadcn-compatible names) ----------------- */
  --background:          var(--neutral-0);
  --foreground:          #1C293B;            /* slate-ish copy */
  --card:                var(--neutral-0);
  --card-foreground:     var(--foreground);

  --primary:             var(--brand-orange);
  --primary-foreground:  var(--neutral-0);
  --secondary:           var(--brand-black);
  --secondary-foreground:var(--neutral-0);
  --tertiary:            var(--neutral-400);
  --tertiary-foreground: var(--brand-black);

  --accent:              var(--brand-orange);
  --accent-foreground:   var(--neutral-0);
  --accent-alt:          var(--brand-blue-deep);
  --accent-alt-foreground: var(--neutral-0);

  --muted:               var(--neutral-300);
  --muted-foreground:    var(--neutral-500);
  --ring:                var(--brand-blue);

  --border:              var(--neutral-200);
  --input-border:        #032435;            /* used in Figma input */
  --hairline:            rgba(31,31,31,0.10);

  /* Status (semantic) */
  --success:             #198754;            /* rgb(25,135,84) */
  --info:                var(--brand-blue);
  --warning:             #FF6600;
  --danger:              #FF0000;

  /* ---- Healthcare extension palette --------------------------------
     The devmy brand-orange remains primary; the healthcare landing
     uses a calmer clinical teal/midnight pairing as a SECONDARY mood
     band so medical decision makers feel reassured.                 */
  --hc-midnight:         #0B1F2A;            /* deep clinical navy */
  --hc-teal:             #0E7C86;            /* trust accent */
  --hc-teal-soft:        #E6F2F3;
  --hc-cream:            #F5EEE3;            /* warm background tint */

  /* ---- Typography --------------------------------------------------- */
  --font-display:        "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:           "Satoshi", "Inter", system-ui, sans-serif;
  --font-mono:           "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale (matches Tokens/Typography page in Figma) */
  --fs-h1:               clamp(40px, 6vw, 80px);
  --fs-h2:               clamp(32px, 4.4vw, 56px);
  --fs-h3:               32px;
  --fs-h4:               24px;
  --fs-h5:               20px;
  --fs-p-lg:             20px;
  --fs-p:                16px;
  --fs-small:            14px;
  --fs-xs:               12px;

  --lh-tight:            1.0;
  --lh-snug:             1.15;
  --lh-normal:           1.5;

  /* ---- Spacing scale (Figma 8-pt grid) ----------------------------- */
  --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 (from Tokens/Radius) ---------------------------------- */
  --radius-2:  2px;
  --radius-4:  4px;
  --radius-6:  6px;     /* default radius */
  --radius-8:  8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-pill: 9999px;

  /* ---- Shadows (from Tokens/Shadow) -------------------------------- */
  --shadow-on-white:    0 4px 20px rgba(20,47,57,0.14);
  --shadow-on-white-strong: 0 4px 30px rgba(27,73,91,0.37);
  --shadow-on-primary:  0 4px 20px rgba(94,16,39,0.21);

  /* ---- Motion ------------------------------------------------------- */
  --ease-out:    cubic-bezier(.16,.84,.30,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
}

/* ---------- Element defaults --------------------------------------- */
html { font-family: var(--font-body); color: var(--foreground); background: var(--background); }
body { margin: 0; font-size: var(--fs-p); line-height: var(--lh-normal); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--brand-black);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--brand-black);
  text-wrap: balance;
}
h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 40px; color: var(--brand-black); }
h4, .h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 32px; color: var(--brand-black); }
h5, .h5 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h5); line-height: 28px; color: var(--brand-black); }

p, .p { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-p); line-height: 24px; color: var(--foreground); }
.p-lg  { font-size: var(--fs-p-lg); line-height: 32px; }
.p-medium { font-weight: 500; }
.p-bold { font-weight: 700; }
.small { font-size: var(--fs-small); line-height: 20px; }
.xsmall { font-size: var(--fs-xs);   line-height: 16px; }

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

/* link */
a { color: inherit; text-decoration: none; }
a.link-orange { color: var(--brand-orange); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
a.link-orange:hover { color: var(--brand-orange-alt); }

/* selection */
::selection { background: var(--brand-orange); color: white; }