/* ============================================================
   Morley Management Group — Design tokens
   Copied verbatim from the Claude Design system bundle:
   brand/design-system/tokens/{colors,typography,spacing}.css
   Do not edit these values here. If the brand palette changes,
   update the design system and re-copy.
   ============================================================ */

/* ============================================================
   Morley Management Group — Color tokens
   ANCHORED TO THE OFFICIAL BRAND COLOUR PALETTE
   (_MORLEY_BrandColourPalette.pdf). Exact RGB values were read
   from the PDF's vector swatch fills:
     Navy (deep) ..... #11294C  Pantone 2767 C  (R17 G41 B76)
     Navy (primary) .. #0D436B  Pantone 7694 C  (R13 G67 B107)
     Copper (core) ... #B15326  (R177 G83  B38)
     Copper (light) .. #F19D6A  (R241 G157 B106)
     Charcoal (ink) .. #0C0D0C  (R12  G13  B12)
     White ........... #FFFFFF
   Both kit navies are anchors (900 = #11294C Pantone 2767 C, 800 = #0D436B
   Pantone 7694 C). The 700-500 steps stem from #0D436B as saturated,
   in-family tints (#2E5E86 / #4E7BA1 / #7C9FBE). Copper + charcoal exact.
   Sand/cream is a supporting warm surface (NOT one of the official 4).
   ============================================================ */

:root {
  /* ---- Navy (primary brand) — both official kit navies + tints ---- */
  --navy-950: #0A1C36; /* deepest, derived */
  --navy-900: #11294C; /* OFFICIAL deep navy ★ Pantone 2767 C (R17 G41 B76) */
  --navy-800: #0D436B; /* OFFICIAL primary navy ★ Pantone 7694 C (R13 G67 B107) */
  --navy-700: #2E5E86; /* tints stem from #0D436B — saturated, in-family */
  --navy-600: #4E7BA1;
  --navy-500: #7C9FBE;
  --navy-slate: #44557E; /* gradient midtone (see 86% post) */

  /* ---- Signature gradients ---- */
  /* Navy: holds the deepest navy long for a premium, historic feel; warms to
     cream only at the very end. Avoids the lighter blues. */
  --gradient-navy: linear-gradient(178deg, #08182E 0%, var(--navy-900) 30%, var(--navy-900) 78%, var(--sand-200) 96%, var(--sand-100) 100%);
  /* Copper: the logo wordmark gradient, light copper into deep copper. */
  --gradient-copper: linear-gradient(120deg, var(--copper-300) 0%, var(--copper-500) 54%, var(--copper-700) 100%);

  /* ---- Copper (the single accent) — official ---- */
  --copper-700: #7E370F; /* deep, for text on cream */
  --copper-600: #97441C;
  --copper-500: #B15326; /* OFFICIAL core copper ★ */
  --copper-400: #CE7544;
  --copper-300: #F19D6A; /* OFFICIAL light copper */
  --copper-200: #EFC6A3; /* palest copper — sparing use only (tints, soft fills) */

  /* ---- Charcoal (official near-black ink) ---- */
  --charcoal-900: #0C0D0C; /* OFFICIAL charcoal — strongest ink */
  --charcoal-700: #2B2E2D;

  /* ---- Sand / cream (warm light surfaces) ---- */
  --sand-50:  #F7F5F1;
  --sand-100: #EFEBE4; /* core cream surface */
  --sand-200: #E3DDD1;
  --sand-300: #D2C9B8;

  /* ---- Neutral ink & gray ---- */
  --white:    #FFFFFF;
  --ink-900:  #0C0D0C; /* official charcoal — strongest ink */
  --ink-700:  #2E3338; /* charcoal-leaning body ink */
  --gray-500: #6B7177;
  --gray-400: #939AA1;
  --gray-300: #C3C8CD;
  --gray-200: #DDE0E4;

  /* ---- Semantic status (used sparingly, brand-tuned) ---- */
  --success-600: #2F6B4F;
  --success-100: #E0EDE6;
  --warning-600: #A5701B;
  --warning-100: #F3E8D2;
  --danger-600:  #9E3328;
  --danger-100:  #F1DEDB;
  --info-600:    #0D436B;
  --info-100:    #DFE7F1;

  /* ============================================================
     Semantic aliases — reference THESE in components
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--white);
  --surface-warm:    var(--sand-100);   /* warm section background */
  --surface-card:    var(--white);
  --surface-inverse: var(--navy-900);   /* dark hero / footer */
  --surface-sunken:  var(--sand-50);

  /* Text */
  --text-strong:  var(--navy-800); /* headings in official primary navy */
  --text-body:    var(--ink-700);
  --text-muted:   var(--gray-500);
  --text-accent:  var(--copper-600);
  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.72);
  --text-ink:     var(--charcoal-900); /* official charcoal for darkest text */
  --text-accent-on-dark: var(--copper-300);

  /* Brand */
  --brand-primary: var(--navy-800); /* official primary navy */
  --brand-deep:    var(--navy-900); /* official deep navy */
  --brand-accent:  var(--copper-500);
  --brand-ink:     var(--charcoal-900);

  /* Lines & borders */
  --border-subtle:  rgba(17, 41, 76, 0.12);
  --border-strong:  rgba(17, 41, 76, 0.24);
  --border-on-dark: rgba(255, 255, 255, 0.18);
  --rule-accent:    var(--copper-500); /* the copper hairline rule */

  /* Focus */
  --focus-ring: var(--copper-500);
}

/* ============================================================
   Morley Management Group — Typography tokens
   One workhorse family: Montserrat.
   - Display / headings: heavy weights, UPPERCASE, wide tracking
     for the confident "NOW ACCEPTING CLIENTS" voice.
   - Body: regular/medium, sentence case, comfortable measure.
   The brushed "Morley" wordmark is a LOGO asset, not a webfont.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800; /* headline weight */
  --weight-black:    900; /* hero stat weight, e.g. "86%" */

  /* ---- Type scale (rem, 16px base) ---- */
  --text-2xs: 0.6875rem; /* 11px — eyebrow / legal */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-md:  1rem;      /* 16px — body default */
  --text-lg:  1.125rem;  /* 18px — lead body */
  --text-xl:  1.375rem;  /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 3rem;      /* 48px */
  --text-5xl: 4rem;      /* 64px */
  --text-6xl: 5.5rem;    /* 88px — hero stat */

  /* ---- Line heights ---- */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-heading: 1.12;
  --leading-body:    1.6;
  --leading-relaxed: 1.75;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;  /* "PEOPLE | OPERATIONS | PROJECTS" */
  --tracking-eyebrow: 0.22em; /* widest — small uppercase labels */

  /* ============================================================
     Semantic role aliases
     ============================================================ */
  --type-eyebrow-size:    var(--text-xs);
  --type-eyebrow-weight:  var(--weight-bold);
  --type-eyebrow-track:   var(--tracking-eyebrow);

  --type-display-family:  var(--font-display);
  --type-display-weight:  var(--weight-extra);
  --type-display-track:   var(--tracking-wide);
  --type-display-leading: var(--leading-heading);

  --type-stat-weight:     var(--weight-black);
  --type-stat-leading:    var(--leading-tight);

  --type-body-family:     var(--font-body);
  --type-body-size:       var(--text-md);
  --type-body-leading:    var(--leading-body);
  --type-body-weight:     var(--weight-regular);
}

/* ============================================================
   Morley Management Group — Spacing, radius, shadow, layout
   Calm, generous, structured. Square-ish corners read credible;
   the brand uses thin copper rules and crisp navy frames, not
   heavy drop shadows.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px 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:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  7rem;     /* 112 */
  --space-16:  10rem;    /* 160 */

  /* ---- Radius (restrained — credible, not bubbly) ---- */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-hair: 1px;
  --border-rule: 2px;   /* the copper accent rule */
  --border-frame: 1.5px; /* thin navy/copper frame on social tiles */

  /* ---- Shadows (soft, navy-tinted, never harsh) ---- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(8, 36, 75, 0.06);
  --shadow-sm: 0 2px 6px rgba(8, 36, 75, 0.08);
  --shadow-md: 0 6px 18px rgba(8, 36, 75, 0.10);
  --shadow-lg: 0 16px 40px rgba(8, 36, 75, 0.14);
  --shadow-inset-hair: inset 0 0 0 1px var(--border-subtle);

  /* ---- Layout ---- */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1240px;
  --gutter:        var(--space-6);
  --section-y:     var(--space-12);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 380ms; /* @kind other */

  /* ---- Z ---- */
  --z-base: 0; /* @kind other */
  --z-raised: 10; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-toast: 1100; /* @kind other */
}