/* ============================================================
   PROYECTO — Design System Tokens
   proyecto.la | Los Angeles
   ============================================================ */

/* ── LOCAL FONTS ─────────────────────────────────────────── */

/* Cindie2-X — PROYECTO logotype (weight 600) */
@font-face {
  font-family: 'Cindie2';
  src: url('/fonts/Cindie2-X.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Cindie2-P — Headers / display text (weight 400) */
@font-face {
  font-family: 'Cindie2';
  src: url('/fonts/Cindie2-P.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Cindie2-Z — Heavy accent / numerals (weight 700) */
@font-face {
  font-family: 'Cindie2';
  src: url('/fonts/Cindie2-Z.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Cindie2-M — Medium (weight 500) */
@font-face {
  font-family: 'Cindie2';
  src: url('/fonts/Cindie2-M.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Cindie2-J — Light (weight 300) */
@font-face {
  font-family: 'Cindie2';
  src: url('/fonts/Cindie2-J.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Neogrotesk Pro — Body text */
@font-face {
  font-family: 'Neogrotesk Pro';
  src: url('/fonts/Neogrotesk Pro Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Share Tech Mono — terminal / system UI only */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {

  /* ── COLORS ─────────────────────────────────────────── */

  --color-black:     #000000;
  --color-white:     #FFFFFF;
  --color-red:       #e6351e;
  --color-sand:      #C8B89A;
  --color-charcoal:  #3D3730;
  --color-steel:     #8A9099;

  --bg-void:         var(--color-black);
  --bg-surface:      var(--color-charcoal);
  --bg-invert:       var(--color-white);

  --fg-primary:      var(--color-white);
  --fg-secondary:    var(--color-steel);
  --fg-accent:       var(--color-red);
  --fg-warm:         var(--color-sand);
  --fg-invert:       var(--color-black);

  --border-primary:  var(--color-white);
  --border-subtle:   var(--color-charcoal);
  --border-accent:   var(--color-red);

  --color-granted:   #e6351e;
  --color-denied:    #e6351e;
  --color-active:    var(--color-red);
  --color-inactive:  var(--color-steel);

  /* ── TYPOGRAPHY ─────────────────────────────────────── */

  /* Cindie2 @ 700 → Cindie2-Z  (logo / wordmark)     */
  /* Cindie2 @ 600 → Cindie2-X  (secondary display)   */
  /* Cindie2 @ 400 → Cindie2-P  (headers / display)   */
  /* Neogrotesk Pro             (body copy)            */
  /* IBM Plex Mono              (terminal / system UI) */

  --font-brand:    'Cindie2', sans-serif;
  --font-display:  'Cindie2', sans-serif;
  --font-body:     'Neogrotesk Pro', 'Helvetica Neue', sans-serif;
  --font-mono:     'Share Tech Mono', 'Courier New', monospace;

  --weight-light:     300;   /* Cindie2-J */
  --weight-regular:   400;   /* Cindie2-P — headers */
  --weight-medium:    500;   /* Cindie2-M */
  --weight-semibold:  600;   /* Cindie2-X */
  --weight-bold:      700;   /* Cindie2-Z — logo/brand */
  --weight-extrabold: 700;

  /* Type scale */
  --text-display-2xl: 120px;
  --text-display-xl:   72px;
  --text-display-lg:   48px;
  --text-display-md:   32px;
  --text-display-sm:   24px;

  --text-mono-lg:  18px;
  --text-mono-md:  14px;
  --text-mono-sm:  12px;
  --text-mono-xs:  11px;

  --text-body-lg:  18px;
  --text-body-md:  16px;
  --text-body-sm:  14px;

  --tracking-ultra:  0.3em;
  --tracking-wide:   0.15em;
  --tracking-normal: 0.05em;
  --tracking-tight:  0em;

  --leading-display: 0.95;
  --leading-ui:      1.2;
  --leading-body:    1.6;
  --leading-mono:    1.5;

  /* ── SPACING ─────────────────────────────────────────── */

  --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;

  /* ── BORDERS ─────────────────────────────────────────── */

  --radius: 0px;
  --border-width: 1px;
  --border-width-thick: 2px;

  /* ── ANIMATION ───────────────────────────────────────── */

  --duration-instant:   0ms;
  --duration-fast:    100ms;
  --duration-normal:  150ms;
  --easing-linear:    linear;
  --easing-step:      steps(1);

  /* ── Z-INDEX ─────────────────────────────────────────── */

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-top:     1000;
}

/* ── BASELINE ────────────────────────────────────────────── */

.proyecto-base {
  background-color: var(--bg-void);
  color: var(--fg-primary);
  font-family: var(--font-mono);
  font-size: var(--text-mono-md);
  line-height: var(--leading-mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Brand wordmark — Cindie2-Z */
.brand {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);        /* → Cindie2-Z */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-primary);
}

/* Display headings — Cindie2-P */
.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-regular);     /* → Cindie2-P */
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-display);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-regular);     /* → Cindie2-P */
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-display);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-regular);     /* → Cindie2-P */
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.h4, h4 {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-regular);     /* → Cindie2-P */
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--fg-primary);
}

/* Heavy numeral — Cindie2-Z */
.numeral {
  font-family: var(--font-display);
  font-size: var(--text-display-2xl);
  font-weight: var(--weight-bold);        /* → Cindie2-Z */
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-display);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Room label */
.room-label {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-regular);     /* → Cindie2-P */
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* System label — mono */
.sys-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

/* Terminal */
.terminal {
  font-family: var(--font-mono);
  font-size: var(--text-mono-lg);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-primary);
}

/* Body — Neogrotesk Pro */
.body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--fg-primary);
}

.accent { color: var(--fg-accent); }
.warm   { color: var(--fg-warm); }

/* ── UTILITIES ───────────────────────────────────────────── */

.bg-void      { background-color: var(--bg-void); }
.bg-surface   { background-color: var(--bg-surface); }
.text-accent  { color: var(--fg-accent); }
.text-primary { color: var(--fg-primary); }
.text-muted   { color: var(--fg-secondary); }
.text-warm    { color: var(--fg-warm); }
.border-std   { border: var(--border-width) solid var(--border-primary); }
.border-accent{ border: var(--border-width) solid var(--border-accent); }
.no-radius    { border-radius: 0; }
.all-caps     { text-transform: uppercase; letter-spacing: var(--tracking-wide); }