/* =========================================================================
   Veronika Novikova — Design Tokens
   ------------------------------------------------------------------------
   A motion designer's portfolio: editorial, cinematic, work-forward.
   Cream paper canvas, warm ink, a single cinema accent for motion cues.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* --------------------------------------------------------------------- */
  /* COLOR — PAPER + INK + ONE ACCENT                                      */
  /* --------------------------------------------------------------------- */

  /* Canvas — warm cream paper */
  --paper:            #F1ECE3;   /* primary page floor */
  --paper-soft:       #F7F3EC;   /* alternating band */
  --paper-deep:       #E8E1D3;   /* recessed surface */
  --surface-card:     #FBF8F2;   /* lifted card on paper */

  /* Ink — warm near-black, never pure */
  --ink:              #15110D;   /* display, primary text */
  --ink-soft:         #2A241D;   /* primary button hover */
  --ink-2:            #4A4239;   /* body running text */
  --ink-3:            #7A7166;   /* sub-text, captions */
  --ink-4:            #A89F92;   /* disabled, dividers */

  /* Hairlines — warm taupes, never gray */
  --rule:             #D9D1C2;   /* default 1px divider */
  --rule-soft:        #E6DFD0;   /* faintest line */
  --rule-strong:      #B8AE9C;   /* emphatic panel edge */

  /* Dark inversion — for full-bleed reels / film credits */
  --film-black:       #0B0907;   /* deep velvet black */
  --film-black-2:     #1A1611;   /* elevated on black */
  --on-film:          #F1ECE3;   /* paper on black */
  --on-film-soft:     #8A8175;   /* muted on black */

  /* Cinema warm — the "REC" signal */
  --signal:           #D9421A;   /* "REC" red — motion cues */
  --signal-soft:      #F2D9CB;   /* tinted halo */
  --signal-deep:      #A82E10;   /* press state */

  /* Digital accent spectrum — bright, saturated, screen-native.
     Pulled from broadcast graphics and supers. Use one per surface as a
     hero accent: a hover, a graph fill, a category tag, a project's
     dominant color treatment. Never combine more than two on one screen. */
  --accent-electric:  #2A4BFF;   /* electric blue — primary digital accent */
  --accent-acid:      #C8FF3D;   /* acid lime — broadcast key */
  --accent-magenta:   #FF2D87;   /* hot magenta — title-sequence pink */
  --accent-amber:     #FFB400;   /* amber — caution / featured */
  --accent-cyan:      #19D3E0;   /* cool cyan — data, supers */

  /* Tinted halos — pair with the accent of the same name. Used for
     2–6% background washes behind a hero accent moment. */
  --accent-electric-soft: #D6DDFF;
  --accent-acid-soft:     #EFFCD0;
  --accent-magenta-soft:  #FFD7E7;
  --accent-amber-soft:    #FFEAB8;
  --accent-cyan-soft:     #C5F2F5;

  /* Optional palette of muted swatches sampled from a colorist's reel.
     Used for project-tag chips and tiny accent moments, never as fills. */
  --tone-ochre:       #C99A4A;
  --tone-moss:        #6B7548;
  --tone-slate:       #4A5A6E;
  --tone-clay:        #B26A4F;
  --tone-bone:        #D8C9A8;

  /* Semantic */
  --success:          #3F7A4C;
  --warning:          #B97A1F;
  --error:            #B8341F;

  /* --------------------------------------------------------------------- */
  /* TYPE — INSTRUMENT SERIF + GEIST + GEIST MONO                          */
  /* --------------------------------------------------------------------- */

  --font-display:     "Instrument Serif", "Times New Roman", serif;
  --font-sans:        "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:        "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --------------------------------------------------------------------- */
  /* SPACING — 4PX BASE                                                    */
  /* --------------------------------------------------------------------- */

  --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;
  --space-40: 160px;

  /* --------------------------------------------------------------------- */
  /* RADII — minimal, mostly square                                        */
  /* --------------------------------------------------------------------- */

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------- */
  /* ELEVATION                                                             */
  /* --------------------------------------------------------------------- */

  --shadow-hairline: inset 0 0 0 1px var(--rule);
  --shadow-soft:     0 1px 2px rgba(21,17,13,.04), 0 4px 12px rgba(21,17,13,.04);
  --shadow-lift:     0 2px 6px rgba(21,17,13,.06), 0 12px 32px rgba(21,17,13,.08);

  /* --------------------------------------------------------------------- */
  /* MOTION                                                                */
  /* --------------------------------------------------------------------- */

  --ease-out:        cubic-bezier(0.2, 0.65, 0.25, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-cinematic:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:        140ms;
  --dur-base:        260ms;
  --dur-slow:        520ms;
  --dur-reveal:      900ms;
}

/* ========================================================================= */
/* SEMANTIC TYPE — preset classes you can apply directly                     */
/* ========================================================================= */

.t-mega,
h1.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.t-display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.t-display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.t-display-md {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.t-display-sm {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.t-italic {
  font-style: italic;
}

.t-title-lg {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.t-title-md {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.t-title-sm {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink-2);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-2);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink-3);
}

/* The motion-credits dialect: monospace labels, sparse but loud */
.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.t-mono-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.t-mono-number {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
}

/* ========================================================================= */
/* BASELINE — use as a starting point on a page                              */
/* ========================================================================= */

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; }
h1 { font-size: clamp(48px, 8vw, 120px); line-height: 0.95; letter-spacing: -0.02em; }
h2 { font-size: clamp(36px, 5vw, 72px);  line-height: 1.0;  letter-spacing: -0.015em; }
h3 { font-size: 44px; line-height: 1.05; letter-spacing: -0.01em; }
h4 { font-size: 28px; line-height: 1.15; letter-spacing: -0.005em; }

p { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--ink); color: var(--paper); }