/* DTA webfonts — loaded from Google Fonts.
   NOTE: substitute binaries; to self-host, drop .woff2 files in assets/fonts
   and replace the @import below with local @font-face src rules.
   - Jost  : geometric grotesque echoing the DTA monogram letterforms
   - Allura: elegant script for the "Diego Tenorio" signature accent only */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Allura&display=swap');
/* ============================================================
   DTA · COLOR
   Warm monochrome. Inspired by the logo (black #050404 → cream
   #ECE8E4) and big.dk's restrained black/white palette.
   No chromatic accent — warmth comes from the paper tone.
   ============================================================ */
:root {
  /* ---- Base neutral ramp (warm-tinted graphite) ---- */
  --ink-950: #050404;   /* logo black — deepest sections */
  --ink-900: #0E0D0C;   /* primary ink / dark surfaces */
  --ink-800: #1A1917;
  --ink-700: #2A2826;
  --ink-600: #3D3A37;
  --ink-500: #5C5853;   /* secondary text */
  --ink-400: #837E77;   /* muted text */
  --ink-300: #A8A29A;
  --ink-200: #C9C4BC;
  --ink-100: #E4E0D8;   /* hairline borders on paper */
  --paper:    #ECE8E4;  /* logo cream */
  --paper-50: #F4F1EC;  /* warm page tint */
  --paper-25: #FAF8F5;  /* lightest page */
  --white:    #FFFFFF;

  /* ---- Accent · warm clay/stone ----------------------------------
     The single chromatic note. Muted and earthen so it still sits
     inside the monochrome world. Used sparingly in the portal:
     active nav, progress, current phase, focus highlights. -------- */
  --clay-700: #6E4A33;  /* deep — text/emphasis on light */
  --clay-600: #855B40;
  --clay-500: #9E7656;  /* base accent */
  --clay-400: #B38E6E;
  --clay-300: #CBAB8D;
  --clay-200: #E2CDB6;  /* accent border */
  --clay-100: #EFE3D5;  /* accent wash (fill) */
  --clay-50:  #F6EFE7;  /* lightest accent tint */

  /* ---- Semantic: surfaces ---- */
  --surface-page:    var(--paper-25);  /* default page background */
  --surface-card:    var(--white);     /* raised card */
  --surface-sunken:  var(--paper-50);  /* recessed / muted panel */
  --surface-ink:     var(--ink-900);   /* dark section (hero, footer) */
  --surface-ink-deep:var(--ink-950);

  /* ---- Semantic: text ---- */
  --text-primary:    var(--ink-900);
  --text-secondary:  var(--ink-500);
  --text-muted:      var(--ink-400);
  --text-on-ink:     var(--paper);     /* text over dark surfaces */
  --text-on-ink-dim: var(--ink-300);

  /* ---- Semantic: lines & strokes ---- */
  --border-hairline: var(--ink-100);              /* 1px rule on paper */
  --border-strong:   var(--ink-900);              /* emphatic divider */
  --border-on-ink:   rgba(236, 232, 228, 0.16);   /* hairline on dark */
  --overlay-ink:     rgba(5, 4, 4, 0.55);         /* image scrim */
  --overlay-ink-soft:rgba(5, 4, 4, 0.30);

  /* ---- Semantic: accent ---- */
  --accent:         var(--clay-500);
  --accent-hover:   var(--clay-600);
  --accent-strong:  var(--clay-700);   /* accent text on light */
  --accent-wash:    var(--clay-100);   /* soft fill behind accent content */
  --accent-tint:    var(--clay-50);    /* faintest band */
  --accent-border:  var(--clay-200);
  --accent-on:      var(--paper);      /* text/icon on a solid accent */

  /* ---- Interaction (monochrome core; accent used selectively) ---- */
  --interactive:        var(--ink-900);
  --interactive-hover:  var(--ink-700);
  --focus-ring:         rgba(158, 118, 86, 0.5);  /* clay focus ring */

  /* ---- Status (kept desaturated to sit inside the mono system) ---- */
  --status-success: #4B5D49;
  --status-warning: #8A7748;
  --status-danger:  #8A4B43;
  --status-info:    var(--ink-600);
}
/* ============================================================
   DTA · TYPOGRAPHY
   Jost  — geometric grotesque, the voice of the brand. Used for
           everything from hero display to UI to body. Set wide-
           tracked uppercase for labels (echoes the logo tagline).
   Allura — script, reserved for the signature accent only.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Jost', 'Century Gothic', system-ui, sans-serif;
  --font-sans:    'Jost', system-ui, -apple-system, sans-serif;
  --font-script:  'Allura', 'Snell Roundhand', cursive;

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ---- Type scale (rem · 16px base) ---- */
  --text-2xs:  0.6875rem;  /* 11 — micro labels */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 1rem;       /* 16 — body */
  --text-md:   1.125rem;   /* 18 */
  --text-lg:   1.375rem;   /* 22 */
  --text-xl:   1.75rem;    /* 28 */
  --text-2xl:  2.25rem;    /* 36 */
  --text-3xl:  3rem;       /* 48 */
  --text-4xl:  4rem;       /* 64 */
  --text-5xl:  5.5rem;     /* 88 */
  --text-6xl:  7.5rem;     /* 120 */

  /* ---- Fluid display (hero scale) ---- */
  --text-hero:    clamp(3rem, 9vw, 8.5rem);
  --text-section: clamp(2rem, 5vw, 4rem);

  /* ---- Line height ---- */
  --leading-none:    1;
  --leading-tight:   1.08;   /* display */
  --leading-snug:    1.25;
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.7;

  /* ---- Letter-spacing ---- */
  --tracking-tighter: -0.03em;  /* large display */
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-label:   0.18em;   /* uppercase eyebrows */
  --tracking-logo:    0.34em;   /* widest — tagline lockup */
}
/* ============================================================
   DTA · SPACE, RADIUS, SHADOW, MOTION, LAYOUT
   Architectural minimalism: a generous 8px-based scale, near-
   square corners, almost no shadow (flat planes), restrained
   motion with a slow architectural ease.
   ============================================================ */
:root {
  /* ---- Spacing (8px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   3rem;     /* 48 */
  --space-8:   4rem;     /* 64 */
  --space-9:   6rem;     /* 96 */
  --space-10:  8rem;     /* 128 */
  --space-11:  12rem;    /* 192 */

  /* ---- Section rhythm ---- */
  --section-pad-y: clamp(4rem, 9vw, 9rem);
  --gutter:        clamp(1.25rem, 5vw, 5rem);  /* @kind spacing */
  --measure:       68ch;          /* max body line length @kind other */
  --content-max:   1480px;        /* max content width @kind spacing */

  /* ---- Radius (near-square) ---- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Borders ---- */
  --border-w:       1px;
  --border-w-thick: 1.5px;

  /* ---- Shadow (whisper-soft; planes, not pop) ---- */
  --shadow-none: none;
  --shadow-xs:  0 1px 2px rgba(5,4,4,0.04);
  --shadow-sm:  0 1px 3px rgba(5,4,4,0.06), 0 1px 2px rgba(5,4,4,0.04);
  --shadow-md:  0 6px 20px rgba(5,4,4,0.07), 0 2px 6px rgba(5,4,4,0.05);
  --shadow-lg:  0 18px 50px rgba(5,4,4,0.12), 0 6px 16px rgba(5,4,4,0.06);
  --shadow-overlay: 0 30px 80px rgba(5,4,4,0.28);

  /* ---- Motion (slow, architectural) ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);      /* @kind other */
  --dur-fast:   140ms;   /* @kind other */
  --dur-base:   260ms;   /* @kind other */
  --dur-slow:   480ms;   /* @kind other */
  --dur-reveal: 720ms;   /* @kind other */

  /* ---- Elevation indices ---- */
  --z-base: 0;        /* @kind other */
  --z-raised: 10;     /* @kind other */
  --z-sticky: 100;    /* @kind other */
  --z-nav: 200;       /* @kind other */
  --z-overlay: 800;   /* @kind other */
  --z-modal: 900;     /* @kind other */
  --z-toast: 1000;    /* @kind other */
}
/* ============================================================
   DTA · BASE
   Minimal, opinion-light element defaults built on the tokens.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings inherit display family; tight, slightly negative tracking */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

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

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Shared helpers used across cards & kits ---- */
.dta-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.dta-signature {
  font-family: var(--font-script);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}