/* Mateo Romero — Design System / Tokens
   Visual direction adapted from the "Pagina 8 / Orchid" Framer template
   (Inter Display + Fragment Mono, light surface, 12px radii, soft motion).
   An optional "Absolute Zero" dark theme is included from the user's DESIGN.md
   for terminal/data surfaces. */

/* Geist — uploaded brand font, replaces previous Inter/Inter Display substitution. */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Thin.ttf") format("truetype");        font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-ThinItalic.ttf") format("truetype");  font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-ExtraLight.ttf") format("truetype");        font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-ExtraLightItalic.ttf") format("truetype");  font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Light.ttf") format("truetype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-LightItalic.ttf") format("truetype");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.ttf") format("truetype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Italic.ttf") format("truetype");       font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.ttf") format("truetype");        font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-MediumItalic.ttf") format("truetype");  font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.ttf") format("truetype");        font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBoldItalic.ttf") format("truetype");  font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Bold.ttf") format("truetype");        font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-BoldItalic.ttf") format("truetype");  font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-ExtraBold.ttf") format("truetype");        font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-ExtraBoldItalic.ttf") format("truetype");  font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Black.ttf") format("truetype");        font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-BlackItalic.ttf") format("truetype");  font-weight: 900; font-style: italic; font-display: swap; }

/* Geist Mono — uploaded brand mono font, replaces previous Fragment Mono substitution. */
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Thin.ttf") format("truetype");        font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-ThinItalic.ttf") format("truetype");  font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-ExtraLight.ttf") format("truetype");        font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-ExtraLightItalic.ttf") format("truetype");  font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Light.ttf") format("truetype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-LightItalic.ttf") format("truetype");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Regular.ttf") format("truetype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Italic.ttf") format("truetype");       font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Medium.ttf") format("truetype");        font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-MediumItalic.ttf") format("truetype");  font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-SemiBold.ttf") format("truetype");        font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-SemiBoldItalic.ttf") format("truetype");  font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Bold.ttf") format("truetype");        font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-BoldItalic.ttf") format("truetype");  font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-ExtraBold.ttf") format("truetype");        font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-ExtraBoldItalic.ttf") format("truetype");  font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Black.ttf") format("truetype");        font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-BlackItalic.ttf") format("truetype");  font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ——— Color: Surface (light, default) ——— */
  --surface:        #FFFFFF;   /* page background */
  --surface-soft:   #F2F4F7;   /* subtle fills, hovers */
  --surface-sunken: #E8EAEE;   /* dividers, low chips */
  --ink:            #1D2029;   /* primary text / dark surface */
  --ink-2:          #262A36;   /* nav text */
  --ink-3:          #49505D;   /* secondary text */
  --ink-4:          #5A6271;   /* tertiary, captions */
  --ink-mute:       rgba(90, 98, 113, 0.5);
  --line:           rgba(29, 32, 41, 0.10);
  --line-strong:    rgba(29, 32, 41, 0.18);

  /* ——— Color: Accent (used very sparingly; pulled from logo + portfolio category tags) ——— */
  --accent:         #1D2029;   /* the brand "color" is near-black */
  --accent-warm:    #C8A27A;   /* editorial warm beige */
  --accent-cool:    #6B8FB5;   /* photo-cool blue */

  /* ——— Color: Semantic ——— */
  --link:           #0099FF;
  --success:        #1F8A5B;
  --warning:        #C98A1B;
  --danger:         #C0392B;

  /* ——— Color: Foreground / Background semantics ——— */
  --fg-1: var(--ink);
  --fg-2: var(--ink-3);
  --fg-3: var(--ink-4);
  --bg-1: var(--surface);
  --bg-2: var(--surface-soft);

  /* ——— Type families ——— */
  --font-display: "Geist", system-ui, -apple-system, sans-serif;
  --font-body:    "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* ——— Type scale (Orchid-derived; tight tracking on display) ——— */
  --fs-display:   88px;  --lh-display: 0.96; --tr-display: -0.04em;
  --fs-h1:        56px;  --lh-h1: 1.04;      --tr-h1: -0.035em;
  --fs-h2:        40px;  --lh-h2: 1.08;      --tr-h2: -0.03em;
  --fs-h3:        28px;  --lh-h3: 1.15;      --tr-h3: -0.02em;
  --fs-eyebrow:   12px;  --lh-eyebrow: 1;    --tr-eyebrow: 0.08em;
  --fs-body-lg:   18px;  --lh-body-lg: 1.5;  --tr-body-lg: -0.005em;
  --fs-body:      15px;  --lh-body: 1.55;    --tr-body: 0;
  --fs-small:     13px;  --lh-small: 1.5;
  --fs-mono:      12px;  --lh-mono: 1.4;

  /* ——— Spacing (4px base) ——— */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 32px; --space-8: 40px; --space-9: 56px;
  --space-10: 80px; --space-11: 120px;

  /* ——— Radii ——— */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;     /* card / image standard (Orchid) */
  --r-lg: 16px;
  --r-pill: 999px;

  /* ——— Elevation ——— */
  --shadow-sm: 0 1px 2px rgba(15,17,22,0.04), 0 1px 1px rgba(15,17,22,0.04);
  --shadow-md: 0 6px 14px rgba(15,17,22,0.06), 0 2px 4px rgba(15,17,22,0.04);
  --shadow-lg: 0 24px 60px rgba(15,17,22,0.10), 0 8px 16px rgba(15,17,22,0.06);
  --blur-bar:  blur(15px);
  --bar-tint:  linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%);

  /* ——— Motion ——— */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   520ms;

  /* ——— Layout ——— */
  --container-max: 1320px;
  --gutter:        40px;
  --gutter-mobile: 21px;
}

/* ——— Optional dark/data theme ("Absolute Zero" from DESIGN.md) ——— */
[data-theme="zero"] {
  --surface:        #000000;
  --surface-soft:   #0E0E0E;
  --surface-sunken: #1B1B1B;
  --ink:            rgba(255,255,255,0.90);
  --ink-2:          rgba(255,255,255,0.90);
  --ink-3:          rgba(255,255,255,0.60);
  --ink-4:          rgba(255,255,255,0.45);
  --line:           rgba(255,255,255,0.20);
  --line-strong:    rgba(255,255,255,0.40);
  --bg-1: var(--surface);
  --bg-2: var(--surface-soft);
  --font-display: "Geist", system-ui, sans-serif;
  --font-body:    "Geist", system-ui, sans-serif;
  --r-md: 0px; --r-sm: 0px; --r-lg: 0px;
}

/* ——— Element defaults ——— */
html, body { background: var(--bg-1); color: var(--fg-1); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; color: var(--fg-1); margin: 0; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }

p  { margin: 0; }
small, .text-small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-2); }
code, .mono { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 600;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.7; transition: opacity var(--dur-fast) var(--ease-out); }

button { font-family: var(--font-body); cursor: pointer; }