/* ============================================================
   CRIATIVOS DO FUTURO — Design Tokens
   colors_and_type.css
   ============================================================ */

/* ── Font Face Declarations ─────────────────────────────── */

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-VariableFont.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Italic-VariableFont.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/RobotoMono-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/RobotoMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/RobotoMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/RobotoMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* ── Base Color Tokens ──────────────────────────────────── */

:root {
  /* Dark backgrounds */
  --color-dark:       #0E1011;   /* primary dark bg */
  --color-darker:     #0D0D0D;   /* section bg */
  --color-darkest:    #04070C;   /* deepest dark, product cards */
  --color-surface:    #181A1D;   /* elevated surface */
  --color-surface-2:  #24262A;   /* secondary elevated surface */

  /* Light / cream */
  --color-cream:      #FAFAED;   /* light bg, text on dark */
  --color-cream-light:#FEFEF6;   /* lightest cream variant */

  /* Brand accents */
  --color-blue-1:     #3098FF;   /* gradient start, primary CTA */
  --color-blue-2:     #066FD8;   /* gradient end */
  --color-electric:   #28BFFF;   /* secondary accent / highlight */
  --color-lime:       #DDFE67;   /* high-energy accent / badges */

  /* Neutral text */
  --color-text-primary:   #FAFAED;  /* light text on dark */
  --color-text-secondary: rgba(250,250,237,0.6);
  --color-text-muted:     rgba(250,250,237,0.35);
  --color-text-dark:      #0E1011;  /* dark text on light bg */

  /* Borders */
  --color-border:       rgba(250,250,237,0.12);
  --color-border-light: rgba(250,250,237,0.25);

  /* Gradients */
  --gradient-blue: linear-gradient(90deg, #3098FF 0%, #066FD8 100%);
  --gradient-blue-diag: linear-gradient(135deg, #3098FF 0%, #066FD8 100%);
}

/* ── Typography Tokens ──────────────────────────────────── */

:root {
  /* Font families */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-mono:    "Roboto Mono", "Courier New", monospace;

  /* Type scale */
  --text-display-2xl: clamp(3rem, 8vw, 7rem);   /* hero display */
  --text-display-xl:  clamp(2.5rem, 5vw, 4.5rem);
  --text-display-lg:  clamp(2rem, 4vw, 3.25rem);
  --text-h1: 2rem;        /* 32px */
  --text-h2: 1.5rem;      /* 24px */
  --text-h3: 1.25rem;     /* 20px */
  --text-lg: 1.125rem;    /* 18px */
  --text-base: 1rem;      /* 16px */
  --text-sm: 0.875rem;    /* 14px */
  --text-xs: 0.75rem;     /* 12px */
  --text-mono: 0.875rem;  /* 14px mono */

  /* Letter spacing */
  --tracking-tight: -0.02em;    /* display headings */
  --tracking-normal: 0;
  --tracking-wide: 0.06em;      /* uppercase labels, tags */

  /* Line height */
  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
}

/* ── Spacing Tokens ─────────────────────────────────────── */

:root {
  --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;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   33px;
  --radius-full: 999px;

  /* Elevation / blur */
  --blur-overlay: blur(92px);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-elevated: 0 8px 48px rgba(0,0,0,0.6);
}

/* ── Semantic Typography Classes ────────────────────────── */

.cf-display {
  font-family: var(--font-display);
  font-size: var(--text-display-2xl);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-cream);
}

.cf-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display-2xl);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-cream);
}

.cf-h1 {
  font-family: var(--font-body);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--color-cream);
}

.cf-h2 {
  font-family: var(--font-body);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-cream);
}

.cf-h3 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-cream);
}

.cf-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.cf-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-text-muted);
}

.cf-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-electric);
}