/* =========================================================
   THE SIGNAL — Design Tokens
   colors_and_type.css
   ========================================================= */

/* ── Fonts ── */
@font-face {
  font-family: "DieGrotesk";
  src: url("fonts/DieGrotesk-C-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "DieGrotesk-A";
  src: url("fonts/DieGrotesk-A-Bold.otf") format("opentype");
  font-weight: 700;
}
@font-face {
  font-family: "DieGrotesk-B";
  src: url("fonts/DieGrotesk-B-Bold.otf") format("opentype");
  font-weight: 700;
}
@font-face {
  font-family: "DieGrotesk-D";
  src: url("fonts/DieGrotesk-D-Bold.otf") format("opentype");
  font-weight: 700;
}

/* ── Color Palette ── */
:root {
  /* Base */
  --color-black:      #000000;
  --color-white:      #FFFFFF;

  /* Warm organics */
  --color-flesh:      #FFECDD;
  --color-flesh-deep: #FFF6EF;
  --color-gold:       #FFD670;
  --color-banana:     #FFEA00;

  /* Vibrant */
  --color-red:        #FE481D;
  --color-red-bright: #FF3337;
  --color-blue:       #0059FF;
  --color-deep:       #5D00FF;
  --color-green:      #19EE6B;
  --color-pink:       #FF70FD;
  --color-orange:     #FF9770;

  /* Gradients */
  --gradient-sunrise: linear-gradient(
    180deg,
    #FFF5EE 0%,
    #FFECDD 32%,
    #FFD670 72%,
    #FF3337 100%
  );
  --gradient-sunset: linear-gradient(
    135deg,
    #FFEA00 0%,
    #FE481D 50%,
    #5D00FF 100%
  );
  --gradient-spectrum: radial-gradient(
    circle at 40% 60%,
    #FFEA00 2%,
    #FFB50A 33%,
    #FF9C0E 47%,
    #FE481D 70%,
    #5E00FF 100%
  );
  --gradient-gradheat: radial-gradient(
    circle at 50% 50%,
    #FFEA00 2%,
    #FFB50A 33%,
    #FF9C0E 47%,
    #FE481D 80%,
    #5E00FF 100%
  );

  /* ── Semantic Tokens ── */
  --fg-primary:       var(--color-black);
  --fg-secondary:     rgba(0,0,0,0.55);
  --fg-inverse:       var(--color-white);
  --bg-primary:       var(--color-white);
  --bg-accent:        var(--color-flesh);
  --bg-dark:          var(--color-black);

  --accent-primary:   var(--color-red);
  --accent-secondary: var(--color-deep);

  /* ── Typography ── */
  --font-display:   "DieGrotesk", "Arial Black", sans-serif;
  --font-body:      "Manrope", "Inter", sans-serif;

  /* Type scale */
  --text-display-xl: 700 96px/1.0  var(--font-display);
  --text-display-lg: 700 72px/1.0  var(--font-display);
  --text-display-md: 700 48px/1.1  var(--font-display);

  --text-h1:    800 48px/1.1   var(--font-body);
  --text-h2:    800 36px/1.15  var(--font-body);
  --text-h3:    700 28px/1.2   var(--font-body);
  --text-body:  300 18px/1.6   var(--font-body);
  --text-small: 300 14px/1.5   var(--font-body);
  --text-label: 700 12px/1.4   var(--font-body);
  --text-mono:  400 14px/1.6   monospace;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Radii */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   32px;
  --radius-pill: 200px;
  --radius-swatch: 103px 103px 103px 0px; /* brand color swatch shape */

  /* Shadows */
  --shadow-card: 0 2px 16px rgba(0,0,0,0.08);
  --shadow-float: 0 8px 40px rgba(0,0,0,0.14);
}

/* ── Base element styles ── */
body {
  font: var(--text-body);
  color: var(--fg-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1 { font: var(--text-h1); margin: 0; }
h2 { font: var(--text-h2); margin: 0; }
h3 { font: var(--text-h3); margin: 0; }
p  { font: var(--text-body); margin: 0 0 1em; }
small { font: var(--text-small); }
label { font: var(--text-label); letter-spacing: 0.05em; text-transform: uppercase; }
code, pre { font: var(--text-mono); background: var(--color-flesh); padding: 2px 6px; border-radius: 4px; }