/* ============================================================
   Fundora — Colors & Type tokens
   ============================================================ */

@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Light.ttf') format('truetype');        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-LightItalic.ttf') format('truetype');  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Regular.ttf') format('truetype');      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-RegularItalic.ttf') format('truetype');font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Medium.ttf') format('truetype');       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Bold.ttf') format('truetype');         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-BoldItalic.ttf') format('truetype');   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/Aeonik-Black.ttf') format('truetype');        font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --font-sans: 'Aeonik', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-h1: 32px;      --fw-h1: 900;  --lh-h1: 1.05;  --tr-h1: -0.02em;
  --fs-h2: 24px;      --fw-h2: 700;  --lh-h2: 1.15;  --tr-h2: -0.01em;
  --fs-h3: 20px;      --fw-h3: 700;  --lh-h3: 1.2;   --tr-h3: -0.005em;
  --fs-h4: 14px;      --fw-h4: 700;  --lh-h4: 1.3;   --tr-h4: 0em;
  --fs-body1: 18px;   --fw-body1: 400; --lh-body1: 1.55;
  --fs-body2: 14px;   --fw-body2: 400; --lh-body2: 1.55;
  --fs-info:  12px;   --fw-info:  400; --lh-info:  1.5;

  --fs-display-xl: clamp(48px, 8vw, 120px); --fw-display: 900; --lh-display: 0.95; --tr-display: -0.03em;
  --fs-display-lg: clamp(40px, 5.5vw, 72px);
  --fs-display-md: clamp(32px, 4vw, 48px);

  --c-pure-black:    #000000;
  --c-ui-black:      #1E1E1E;
  --c-paragraph:     #393A3D;
  --c-placeholder:   #A3A3A3;
  --c-border:        #DEDEDE;
  --c-surface:       #F6F6F9;
  --c-white:         #FFFFFF;
  --c-fundora-blue:  #2036FF;
  --c-blue-grey:     #E1E3F6;
  --c-success:       #00BD82;
  --c-error:         #BD0000;

  --fg-primary:   var(--c-ui-black);
  --fg-secondary: var(--c-paragraph);
  --fg-muted:     var(--c-placeholder);
  --fg-inverse:   var(--c-white);
  --fg-accent:    var(--c-fundora-blue);

  --bg-primary:   var(--c-white);
  --bg-surface:   var(--c-surface);
  --bg-inverse:   var(--c-ui-black);
  --bg-tint:      var(--c-blue-grey);

  --border-default: var(--c-border);
  --border-strong:  var(--c-ui-black);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.04);
  --shadow-glow: 0 0 0 4px rgba(32, 54, 255, 0.12);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 26px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-h4: 14px;
    --fs-body1: 18px;
    --fs-body2: 14px;
    --fs-info: 12px;
  }
}

html, body { font-family: var(--font-sans); color: var(--fg-primary); background: var(--bg-primary); }

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1); font-weight: var(--fw-h1);
  line-height: var(--lh-h1); letter-spacing: var(--tr-h1);
  text-transform: uppercase;
}
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); }

.body1, p { font-size: var(--fs-body1); font-weight: var(--fw-body1); line-height: var(--lh-body1); color: var(--fg-secondary); }
.body2 { font-size: var(--fs-body2); font-weight: var(--fw-body2); line-height: var(--lh-body2); color: var(--fg-secondary); }
.info, small { font-size: var(--fs-info); font-weight: var(--fw-info); line-height: var(--lh-info); color: var(--fg-muted); }

.display-xl { font-size: var(--fs-display-xl); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); text-transform: uppercase; }
.display-lg { font-size: var(--fs-display-lg); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); text-transform: uppercase; }
.display-md { font-size: var(--fs-display-md); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); text-transform: uppercase; }