/* SPID Design System — colors & typography tokens */

/* ============================== FONTS ============================== */
@font-face {
  font-family: "Hurme Geometric Sans 4";
  src: url("fonts/HurmeGeometricSans4.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hurme Geometric Sans 4";
  src: url("fonts/HurmeGeometricSans4 Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hurme Geometric Sans 4";
  src: url("fonts/HurmeGeometricSans4 SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hurme Geometric Sans 4";
  src: url("fonts/HurmeGeometricSans4 Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hurme Geometric Sans 4";
  src: url("fonts/HurmeGeometricSans4 Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hurme Geometric Sans 4";
  src: url("fonts/HurmeGeometricSans4 BoldOblique.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============================== BRAND COLORS ============================== */
  /* From the official "Couleurs SPID" PDF.
     The brand is built on three colors: deep ink, sunset orange, and amber gold. */
  --spid-black:        #050300;     /* primary ink — almost-black */
  --spid-orange:       #F74C06;     /* primary brand orange */
  --spid-amber:        #F9BC2C;     /* primary brand amber/gold */
  --spid-orange-light: #F87D17;     /* secondary orange */
  --spid-cream:        #FEF8EA;     /* warm canvas / surface */
  --spid-cream-2:      #FDEABE;     /* deeper cream */
  --spid-white:        #FFFFFF;

  /* Signature gradient — used on hero blobs, primary buttons, the logo mark.
     Always orange → amber, never reversed. */
  --spid-gradient: linear-gradient(135deg, #F74C06 0%, #F9BC2C 100%); /* @kind color */
  --spid-gradient-soft: linear-gradient(135deg, rgba(247,76,6,0.7) 0%, rgba(249,188,44,0.7) 100%); /* @kind color */

  /* "Navy" deep ink — used as login background and on dark surfaces in
     screens like Login/Inscription. Distinct from pure black. */
  --spid-navy:        #04052E;
  --spid-navy-2:      #303972;     /* secondary navy text/border */

  /* ============================== NEUTRAL SCALE ============================== */
  --gray-50:  #F7F7F7;
  --gray-100: #F2F2F2;
  --gray-200: #E9EBF8;            /* divider blue-gray (Figma 233,235,248) */
  --gray-300: #D5D7DC;
  --gray-400: #A0AEC0;
  --gray-500: #8E98A8;
  --gray-600: #717182;
  --gray-700: #4A5565;
  --gray-800: #1E1E1E;
  --gray-900: #101828;

  /* ============================== SEMANTIC ============================== */
  --success:        #00A63E;       /* green from Admin/Web-app metric chips */
  --success-soft:   #05DF72;
  --warning:        #FDC700;       /* yellow alerts */
  --danger:         #FD2727;       /* destructive */
  --danger-soft:    #FF6467;
  --info:           #155DFC;
  --info-soft:      #51A2FF;

  /* ============================== SURFACE / FG ============================== */
  --bg:             var(--spid-cream);          /* default page bg in app */
  --bg-elevated:    rgba(254,248,234,0.5);      /* glass card */
  --bg-elevated-2:  rgba(254,248,234,0.38);     /* sidebar tint */
  --surface-card:   #FFFFFF;
  --surface-dark:   var(--spid-navy);
  --surface-orange-soft: rgba(231,99,5,0.05);   /* metric card bg */

  --fg-1:           var(--spid-black);          /* primary text */
  --fg-2:           #1E1E1E;
  --fg-3:           #4A5565;
  --fg-muted:       #8E98A8;
  --fg-on-dark:     #FFFFFF;
  --fg-on-orange:   #FFFFFF;

  /* ============================== BORDERS ============================== */
  --border-1:       rgba(0,0,0,0.12);
  --border-2:       rgba(0,0,0,0.20);
  --border-soft:    var(--gray-200);
  --border-input:   #73766B;                    /* the warm gray of inputs */
  --border-orange:  rgba(104,32,3,0.12);

  /* ============================== RADII ============================== */
  --radius-xs: 4px;     /* checkboxes */
  --radius-sm: 6px;     /* inputs, buttons */
  --radius-md: 8px;     /* nav pills */
  --radius-lg: 10px;    /* large modal cards */
  --radius-xl: 12px;    /* swatches */
  --radius-2xl: 16px;   /* metric cards */
  --radius-pill: 9999px;

  /* ============================== SHADOWS ============================== */
  --shadow-card:   0px 4px 100px 0px rgba(0,0,0,0.05);
  --shadow-modal:  0px 4px 100px 0px rgba(0,0,0,0.10);
  --shadow-soft:   0px 16px 15px 0px rgba(0,0,0,0.02);
  --shadow-press:  0px 2px 6px 0px rgba(0,0,0,0.10);

  /* The signature backdrop: glass over a vivid orange→amber blob.
     Apply this on any "atmospheric" surface (login, dashboards). */
  --backdrop-glass: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.24) 100%); /* @kind color */
  --backdrop-blur:  blur(20px); /* @kind other */

  /* ============================== SPACING (8pt) ============================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;     /* gap used between input rows */
  --space-6: 24px;
  --space-7: 31px;     /* form/section vertical rhythm */
  --space-8: 36px;     /* card padding */
  --space-9: 48px;
  --space-10: 64px;

  /* ============================== TYPE FAMILIES ============================== */
  --font-display: "Hurme Geometric Sans 4", "Hurme Geometric Sans 1", "Inter", system-ui, sans-serif;
  --font-body:    "Hurme Geometric Sans 4", "Hurme Geometric Sans 1", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* ============================== TYPE SCALE (display) ============================== */
  --fs-display:  128px;   /* the giant logotype lockup */
  --fs-h1:       48px;
  --fs-h2:       36px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-h5:       16px;
  --fs-body:     14px;
  --fs-small:    12px;
  --fs-micro:    10px;

  /* All display headings use 100% line-height in the source — keep tight */
  --lh-tight:   100%;
  --lh-snug:    1.2; /* @kind font */
  --lh-normal:  1.4; /* @kind font */
  --lh-relaxed: 1.6; /* @kind font */
}

/* ============================== BASE ELEMENTS ============================== */
html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--spid-cream);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--fg-1); }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--fg-1); }
h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--fg-1); }
h4, .h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-tight); color: var(--fg-1); }
h5, .h5 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h5); line-height: var(--lh-tight); color: var(--fg-1); }
p, .body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); }
.caption  { font-family: var(--font-body); font-size: var(--fs-small); color: var(--fg-3); }
.eyebrow  { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); letter-spacing: 0.16em; text-transform: uppercase; color: var(--spid-orange); }
.metric   { font-family: var(--font-display); font-weight: 700; font-size: 36px; letter-spacing: -0.01em; }
code, .code { font-family: var(--font-mono); font-size: 13px; }