/*
 * greymatters — Base Foundation
 * Single source of truth for all greymatters projects.
 * Source: kb/brand/*.json (canonical)
 *
 * Usage:
 *   @import url('path/to/kb/brand/gm-base.css');
 *
 * This file provides:
 *   - Font imports (Jost, Cormorant Garamond, Cousine)
 *   - CSS custom properties (colors, typography, spacing, motion, shadows)
 *   - Utility classes (.label, .meta, .body-text, .display-lg, etc.)
 *   - Image rule (grayscale default)
 *   - Focus ring
 *
 * It does NOT provide layout, components, or page-specific styles.
 * Each project adds its own on top.
 *
 * Two contexts share the SAME tokens but use different ends of the scale:
 *   Tools (forms, dashboards)  → smaller type, snappy motion, tighter spacing
 *   Luxury (website, portfolio) → larger type, slow motion, breathing room
 */

/* ═══════════════════════════════════════════════════
   FONTS
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:ital,wght@0,100..900;1,100..900&family=Cousine&display=swap');

/* ═══════════════════════════════════════════════════
   CUSTOM PROPERTIES — :root
   ═══════════════════════════════════════════════════ */

:root {

  /* ── Core palette (Brand Book 2018) ── */
  --gm-black:       #27251F;
  --gm-mid:         #58595B;
  --gm-light:       #A7A9AC;
  --gm-bg:          #F5F4F2;
  --gm-bg-warm:     #EDECEA;
  --gm-white:       #FFFFFF;

  /* ── Extended ── */
  --gm-border:      #E5E3DF;
  --gm-surface:     #FFFFFF;
  --gm-surface-alt: #F0EEEB;
  --gm-accent:      #27251F;
  --gm-gold:        #C9B394;
  --gm-amber:       #B8860B;
  --gm-cream:       #FAF9F7;
  --gm-success:     #4a7c59;
  --gm-error:       #8B2E24;

  /* ── Status pairs (fg / bg) ── */
  --st-green:       #2D5A3F;    --st-green-bg:   #E8F0E8;
  --st-amber:       #8B6914;    --st-amber-bg:   #FDF3E3;
  --st-red:         #8B2E24;    --st-red-bg:     #FCE8E6;
  --st-steel:       #3A4F6E;    --st-steel-bg:   #E6EAF0;
  --st-plum:        #5E3A71;    --st-plum-bg:    #F0E8F3;
  --st-rose:        #7A2D55;    --st-rose-bg:    #F8E6EF;
  --st-teal:        #1F6B5A;    --st-teal-bg:    #E3F0ED;
  --st-neutral:     #6B6966;    --st-neutral-bg: #EDECE9;

  /* ── Card accents ── */
  --ca-late:        #B8860B;
  --ca-holiday:     #7B5EA7;
  --ca-trip:        #4A6FA5;
  --ca-issues:      #C44D3D;
  --ca-sick:        #A44D72;
  --ca-wfh:         #2A8F7A;

  /* ── Dark mode (luxury / portfolio) ── */
  --dark-bg:        #0D0D0D;
  --dark-surface:   #161616;
  --dark-elevated:  #1F1F1F;
  --dark-border:    #2A2A2A;
  --cream:          #FAF9F7;
  --cream-dark:     #E8E6E3;
  --gold:           #C9B394;
  --gold-dark:      #B8A078;
  --gold-light:     #3D3529;
  --teal-deep:      #2A4A4A;
  --warm-gray:      #A0A0A0;

  /* ── Typography ── */
  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-body:      'Jost', system-ui, -apple-system, sans-serif;
  --font-mono:      'Cousine', monospace;

  /* Type scale — tools context (14px base) */
  --type-xs:        11px;
  --type-sm:        12px;
  --type-base:      14px;
  --type-md:        15px;
  --type-lg:        16px;
  --type-xl:        18px;
  --type-2xl:       22px;

  /* Type scale — luxury context (18px base, 1.3 ratio) */
  --type-3xl:       30px;
  --type-4xl:       39px;
  --type-5xl:       51px;
  --type-6xl:       66px;
  --type-7xl:       86px;
  --type-hero:      clamp(48px, 8vw, 112px);
  --type-display:   clamp(36px, 5vw, 66px);

  /* Weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* ── Spacing (canonical scale) ── */
  --space-3xs:      2px;
  --space-2xs:      4px;
  --space-xs:       8px;
  --space-sm:       12px;
  --space-md:       16px;
  --space-lg:       24px;
  --space-xl:       32px;
  --space-2xl:      48px;
  --space-3xl:      64px;
  --space-4xl:      96px;
  --space-5xl:      128px;

  /* ── Layout — header / footer ── */
  --gm-logo-height-header: 1rem;
  --gm-logo-height-footer: 0.5rem;
  --gm-header-pad: var(--space-lg);
  --gm-footer-pad: var(--space-lg);
  --gm-header-height: calc(var(--gm-logo-height-header) + var(--gm-header-pad) * 2);
  --gm-footer-height: calc(var(--gm-logo-height-footer) + var(--gm-footer-pad) * 2);

  /* ── Radius ── */
  --radius-xs:      2px;
  --radius-sm:      3px;
  --radius-md:      8px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-full:    9999px;

  /* ── Shadows ── */
  --shadow-subtle:   0 2px 8px rgba(0,0,0,0.04);
  --shadow-medium:   0 8px 32px rgba(0,0,0,0.08);
  --shadow-elevated: 0 24px 64px rgba(0,0,0,0.12);
  --shadow-image:    0 16px 48px rgba(0,0,0,0.15);

  /* ── Motion — tools (snappy) ── */
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;

  /* ── Motion — luxury (contemplative) ── */
  --duration-slower:  500ms;
  --duration-slowest: 700ms;
  --duration-glacial: 1000ms;
  --stagger-base:     80ms;

  /* ── Easings ── */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elegant:  cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── Hover / active ── */
  --hover-lift:    -3px;
  --hover-scale:   1.02;
  --hover-opacity: 0.85;
  --active-scale:  0.98;

  /* ── Interactive states — icons ── */
  --icon-idle:     0.35;
  --icon-hover:    0.85;
  --icon-active:   1;

  /* ── Interactive states — links ── */
  --link-idle:     0.6;
  --link-hover:    1;
  --link-active:   0.85;

  /* ── Focus ── */
  --focus-ring-w:      2px;
  --focus-ring-offset: 3px;
  --focus-ring-color:  var(--gm-gold);

  /* ── Image defaults ── */
  --img-opacity:   0.85;
}

/* ═══════════════════════════════════════════════════
   RESET (minimal)
   ═══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ═══════════════════════════════════════════════════
   BASE ELEMENTS
   ═══════════════════════════════════════════════════ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--gm-black);
  background: var(--gm-bg);
}

/* ═══════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ═══════════════════════════════════════════════════ */

.display-lg {
  font-family: var(--font-display);
  font-size: var(--type-4xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.display-sm {
  font-family: var(--font-display);
  font-size: var(--type-3xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
}
.label {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--gm-light);
}
.meta {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--gm-mid);
  letter-spacing: 0.3px;
}
.body-text {
  font-size: var(--type-md);
  line-height: var(--leading-relaxed);
  color: var(--gm-mid);
  max-width: 560px;
}
.italic { font-style: italic; }
.serif  { font-family: var(--font-display); }

/* ═══════════════════════════════════════════════════
   IMAGE — grayscale by default, always
   Color hover only added per-project when explicitly requested.
   ═══════════════════════════════════════════════════ */

.img-editorial {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--img-opacity);
  filter: grayscale(100%);
}

/* ═══════════════════════════════════════════════════
   FOCUS RING — accessible, branded
   ═══════════════════════════════════════════════════ */

:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}