/* ================================================================
   TAG STUDIO — colors & type tokens
   v1.0 · Feb 2026 — derived from "01 TAG GUIDELINES.pdf"
   ================================================================ */

/* Webfonts — all licensed brand faces now shipped locally from fonts/.
   - Aether Mono — display + body voice.
   - ABC Diatype — detail voice (captions, eyebrows, metadata, addresses).
   - Area, General Sans — sibling families available for editorial / future
     surfaces (not yet bound to a semantic token). */
@font-face {
  font-family: "Aether Mono";
  src: url("fonts/AetherMonoA.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("fonts/ABCDiatype-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("fonts/ABCDiatype-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Area";
  src: url("fonts/Area-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Area";
  src: url("fonts/Area-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Area";
  src: url("fonts/Area-Extrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("fonts/GeneralSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("fonts/GeneralSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- COLOR ---------- */
  /* Primary palette (from style guide, p.26) */
  --tag-dark-olive:       #474120;   /* Pantone 378 U  · the brand's signature */
  --tag-deep-void:        #000000;   /* Pantone Black 6 U */
  --tag-soft-concrete:    #EEEEEE;   /* Pantone Warm Gray 1 U */
  --tag-paper:            #FFFFFF;   /* implied — print + screen background */

  /* Extended neutrals (derived; quiet-luxury warmth, no pure cold grays) */
  --tag-bone:             #F4F1EA;   /* warm off-white, lighter than concrete */
  --tag-stone:            #C9C4B8;   /* mid neutral, between concrete and olive */
  --tag-clay:             #8A8268;   /* low-chroma olive·tan, signage gray */
  --tag-shadow:           #2B2614;   /* near-black olive, for deep type */

  /* Semantic tokens (light surface — the default in the style guide) */
  --bg:                   var(--tag-paper);
  --bg-alt:               var(--tag-soft-concrete);
  --bg-bone:              var(--tag-bone);
  --bg-inverse:           var(--tag-deep-void);
  --bg-brand:             var(--tag-dark-olive);

  --fg:                   var(--tag-deep-void);
  --fg-muted:             var(--tag-clay);
  --fg-soft:              #6E6852;
  --fg-inverse:           var(--tag-paper);
  --fg-brand:             var(--tag-dark-olive);

  --rule:                 #1A1A1A;        /* hairline on light */
  --rule-soft:            rgba(0,0,0,.18);
  --rule-inverse:         rgba(255,255,255,.32);
  --rule-on-brand:        rgba(255,255,255,.30);

  --focus-ring:           var(--tag-dark-olive);
  --selection-bg:         var(--tag-dark-olive);
  --selection-fg:         var(--tag-paper);

  /* ---------- TYPE ---------- */
  /* Two type voices, per style guide (p.19): Aether Mono for titles +
     bodies (Style A, sentence case for body, ALL CAPS for titles),
     ABC Diatype for short captions/details (regular, ALL CAPS).
     Substitutes ship via Google Fonts. */
  --font-display:    "Aether Mono", "Geist Mono", ui-monospace, "JetBrains Mono", "Courier New", monospace;
  --font-body:       "Aether Mono", "Geist Mono", ui-monospace, "JetBrains Mono", monospace;
  --font-detail:     "ABC Diatype", "General Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-editorial:  "Area", "General Sans", "Inter", system-ui, -apple-system, sans-serif;

  /* Per the guide, headings + body share Aether Mono. Body uses
     line-height ×3 (very generous), titles ×1. Tracking 0. */
  --tracking-display:    0em;
  --tracking-body:       0em;
  --tracking-detail:     0.04em;     /* ALL CAPS detail — slight tracking helps legibility */

  --leading-display:     1.0;
  --leading-body:        1.7;        /* the guide's "x3" reads as very airy; 1.7 holds at screen sizes */
  --leading-detail:      1.5;

  /* Type scale — quiet, restrained. Architecture portfolios privilege
     wide whitespace over a long type ramp. */
  --fs-eyebrow:          11px;       /* small caps detail */
  --fs-caption:          12px;
  --fs-body-sm:          13px;
  --fs-body:             15px;
  --fs-body-lg:          17px;
  --fs-h6:               18px;
  --fs-h5:               22px;
  --fs-h4:               28px;
  --fs-h3:               36px;
  --fs-h2:               48px;
  --fs-h1:               68px;
  --fs-display:          120px;      /* full-bleed wordmark scale */

  /* ---------- SPACE ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII / ELEVATION ---------- */
  /* Quiet luxury — corners are sharp by default. Pills + capsule
     buttons use a soft, generous radius reminiscent of the
     style-guide's eyebrow capsule chips. */
  --radius-0:      0px;        /* default — sharp */
  --radius-1:      2px;        /* hairline — inputs */
  --radius-pill:   999px;      /* eyebrow capsules ("LOGO PRINCIPAL", "HOW WE LOOK") */

  --shadow-0:      0 0 0 1px var(--rule-soft);
  --shadow-1:      0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(45,40,20,.06);
  --shadow-card:   0 1px 1px rgba(0,0,0,.03), 0 18px 40px -16px rgba(45,40,20,.18);

  /* ---------- MOTION ---------- */
  --ease-quiet:    cubic-bezier(.2,.6,.2,1);  /* @kind other */
  --ease-stand:    cubic-bezier(.4,0,.2,1);   /* @kind other */
  --dur-fast:      160ms;       /* @kind other */
  --dur-base:      280ms;       /* @kind other */
  --dur-slow:      560ms;       /* @kind other */
  --dur-cinema:    1200ms;      /* @kind other */ /* fades, image reveals */

  /* ---------- LAYOUT ---------- */
  --layout-max:        1440px;
  --layout-gutter:     32px;
  --layout-margin:     48px;
  --grid-cols:         12;     /* @kind other */
  --grid-gap:          24px;
}

/* Dark surface (used full-bleed on imagery, applications p.27) */
[data-theme="dark"] {
  --bg:           var(--tag-deep-void);
  --bg-alt:       var(--tag-shadow);
  --bg-bone:      var(--tag-shadow);
  --bg-inverse:   var(--tag-paper);
  --fg:           var(--tag-paper);
  --fg-muted:     #A8A18A;
  --fg-soft:      #C9C4B8;
  --fg-inverse:   var(--tag-deep-void);
  --fg-brand:     var(--tag-soft-concrete);
  --rule:         var(--tag-paper);
  --rule-soft:    rgba(255,255,255,.18);
}

/* Brand surface — dark olive */
[data-theme="brand"] {
  --bg:           var(--tag-dark-olive);
  --bg-alt:       #3a3519;
  --bg-bone:      #3a3519;
  --bg-inverse:   var(--tag-paper);
  --fg:           var(--tag-paper);
  --fg-muted:     #C9C4B8;
  --fg-soft:      #EEEEEE;
  --fg-inverse:   var(--tag-dark-olive);
  --fg-brand:     var(--tag-paper);
  --rule:         var(--tag-paper);
  --rule-soft:    rgba(255,255,255,.30);
}

/* ================================================================
   SEMANTIC TYPE — drop these classes anywhere
   ================================================================ */
.tag-display, .tag-h1, .tag-h2, .tag-h3, .tag-h4, .tag-h5, .tag-h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}
.tag-display { font-size: var(--fs-display); font-weight: 800; }
.tag-h1      { font-size: var(--fs-h1); }
.tag-h2      { font-size: var(--fs-h2); }
.tag-h3      { font-size: var(--fs-h3); }
.tag-h4      { font-size: var(--fs-h4); }
.tag-h5      { font-size: var(--fs-h5); }
.tag-h6      { font-size: var(--fs-h6); }

.tag-body, .tag-body-lg, .tag-body-sm, .tag-quote {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}
.tag-body-lg { font-size: var(--fs-body-lg); }
.tag-body    { font-size: var(--fs-body); }
.tag-body-sm { font-size: var(--fs-body-sm); }

.tag-quote {
  font-size: var(--fs-h5);
  line-height: 1.5;
  color: var(--fg);
  font-weight: 400;
}

.tag-caption, .tag-eyebrow, .tag-meta {
  font-family: var(--font-detail);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-detail);
  color: var(--fg-muted);
  margin: 0;
}
.tag-eyebrow { font-size: var(--fs-eyebrow); }
.tag-caption { font-size: var(--fs-caption); }
.tag-meta    { font-size: var(--fs-caption); color: var(--fg-soft); }

/* The signature "capsule" eyebrow used throughout the style guide
   (e.g. LOGO PRINCIPAL, POSICIÓN DE LOGO, HOW WE LOOK). */
.tag-capsule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-detail);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  color: var(--fg);
  background: transparent;
  line-height: 1;
  white-space: nowrap;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }