/* Greg McCarthy Studios — Design Tokens */
/* Auto-generated from design system v2.1 */

:root {
  /* ── Text ─────────────────────────────── */
  --color-text-primary:    #000000;
  --color-text-secondary:  #4f4f4f;
  --color-text-tertiary:   #767676; /* min 4.5:1 on white */
  --color-text-disabled:   #b8b8b8; /* WCAG 1.4.3 exempt */
  --color-text-inverse:    #ffffff;
  --color-text-on-image:   #ffffff; /* theme-agnostic — photos don't flip with the theme */
  --color-text-heading:    #2d2d2d;
  --color-text-link:       #009afe;
  --color-text-placeholder:#767676;
  --color-text-error:      #c0392b;
  --color-text-success:    #2e7d32;

  /* ── Surfaces ─────────────────────────── */
  --color-surface-page:      #ffffff;
  --color-surface-secondary: #fafafa;
  --color-surface-tertiary:  #f3f3f3;
  --color-surface-inverse:   #394146;
  --color-surface-error:     #fde8e8;
  --color-surface-success:   #e8f5e9;

  /* ── Borders ──────────────────────────── */
  --color-border-default:  #e0e0e0;
  --color-border-subtle:   #f3f3f3; /* footer column rules, hairline dividers */
  --color-border-input:    #767676; /* 3:1 on white */
  --color-border-focus:    #0076cc; /* 4.71:1 on white */
  --color-border-error:    #c0392b;
  --color-border-success:  #2e7d32;
  --color-border-disabled: #e0e0e0;

  /* ── Accent ───────────────────────────── */
  --color-accent: #009afe;

  /* ── 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;
  --space-48: 192px;

  /* ── Border radius ────────────────────── */
  --radius-sharp: 2px;  /* buttons, inputs, cards */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-pill:  20px; /* tags, pills */

  /* ── Button ───────────────────────────── */
  --btn-height-sm: 32px;
  --btn-height-md: 44px;
  --btn-height-lg: 52px;
  --btn-pad-sm:    0 14px;
  --btn-pad-md:    0 20px;
  --btn-pad-lg:    0 28px;
  --btn-font-sm:   12px;
  --btn-font-md:   14px;
  --btn-font-lg:   16px;
  --btn-weight:    600;
  --btn-tracking:  -0.01em;
  --btn-radius:    var(--radius-sharp);
  --btn-transition: 260ms cubic-bezier(0.22, 1, 0.36, 1);
  --btn-p-bg:          #000000;
  --btn-p-bg-hover:    #394146;
  --btn-p-text:        #ffffff;
  --btn-g-border:      #000000;
  --btn-g-bg-hover:    #000000;
  --btn-g-text-hover:  #ffffff;
  --btn-dis-bg:        #f3f3f3;
  --btn-dis-text:      #b8b8b8;
  --btn-dis-border:    #e0e0e0;
  --btn-focus-ring:    #0076cc;
  --btn-arrow-offset:  4px;

  /* ── Motion ───────────────────────────── */
  --duration-fast:    100ms;
  --duration-base:    150ms;
  --duration-slow:    300ms;
  --duration-smooth:  500ms;
  --duration-luxury:  700ms;
  --ease-default:  ease;
  --ease-out:      ease-out;
  /* Signature curves — smooth is the default editorial ease,
   * swift is a Material-style curve for small utility transitions. */
  --ease-smooth:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-swift:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ──────────────────────────── */
  --z-base:    0;
  --z-raised:  1;
  --z-overlay: 10;
  --z-nav:     100;
  --z-modal:   200;

  /* ── Typography — weights ─────────────── */
  --font-light:     300;
  --font-regular:   400;
  --font-book:      450;
  --font-semi-bold: 600;

  /* ── Per-style weights ────────────────────
   * Each type style has a default weight and an emphasized (semi-bold)
   * variant. Use the emphasized token when you need to lift a single
   * word, label, or line within a paragraph without changing the size
   * / line-height / letter-spacing trio. */
  --font-weight-display-l:             var(--font-regular);
  --font-weight-display-l-emphasized:  var(--font-semi-bold);
  --font-weight-display-m:             var(--font-regular);
  --font-weight-display-m-emphasized:  var(--font-semi-bold);
  --font-weight-display-s:             var(--font-regular);
  --font-weight-display-s-emphasized:  var(--font-semi-bold);
  --font-weight-h1:                    var(--font-regular);
  --font-weight-h1-emphasized:         var(--font-semi-bold);
  --font-weight-h3:                    var(--font-semi-bold);
  --font-weight-h3-emphasized:         var(--font-semi-bold);
  --font-weight-tabs:                  var(--font-book);
  --font-weight-tabs-emphasized:       var(--font-semi-bold);
  --font-weight-small:                 var(--font-light);
  --font-weight-small-emphasized:      var(--font-semi-bold);
  --font-weight-body-large:            var(--font-regular);
  --font-weight-body-large-emphasized: var(--font-semi-bold);
  --font-weight-body:                  var(--font-regular);
  --font-weight-body-emphasized:       var(--font-semi-bold);
  --font-weight-input:                 var(--font-regular);
  --font-weight-input-emphasized:      var(--font-semi-bold);
  --font-weight-caption:               var(--font-light);
  --font-weight-caption-emphasized:    var(--font-semi-bold);

  /* ── Typography — type scale ──────────── */
  --font-size-display-l:    39px;
  --line-height-display-l:  48px;
  --letter-spacing-display-l: -0.03em;

  --font-size-display-m:    31px;
  --line-height-display-m:  39px;
  --letter-spacing-display-m: -0.03em;

  --font-size-display-s:    23px;
  --line-height-display-s:  29px;
  --letter-spacing-display-s: -0.03em;

  --font-size-h1:    21px;
  --line-height-h1:  33px;
  --letter-spacing-h1: 0em;

  --font-size-h3:    18px;
  --line-height-h3:  29px;
  --letter-spacing-h3: 0em;

  --font-size-tabs:    13px;
  --line-height-tabs:  21px;
  --letter-spacing-tabs: -0.01em;

  --font-size-small:    13px;
  --line-height-small:  21px;
  --letter-spacing-small: 0;

  --font-size-body-large:    16px;
  --line-height-body-large:  20px;
  --letter-spacing-body-large: -0.01em;

  --font-size-body:    14px;
  --line-height-body:  23px;
  --letter-spacing-body: calc(-0.01em + var(--tracking-body));

  --font-size-input:    14px;
  --line-height-input:  20px;
  --letter-spacing-input: 0;

  --font-size-caption:    12px;
  --line-height-caption:  20px;
  --letter-spacing-caption: 0;

  /* ── Type dashboard ───────────────────────
   * Global knobs for body-text typography. Affects body, body-large,
   * label, input, caption (and anything that consumes those scale tokens).
   * Headings (display/h2/h3/h4) are NOT affected — they keep their own
   * tighter tracking. */
  --word-spacing-body: -0.05em;
  --tracking-body:     0.025em;     /* + tighter? use negative. + airier? positive. */
}

/* ── Dark theme ────────────────────────────
 * Overrides the semantic color tokens only. Everything downstream
 * (components, spacing, typography) resolves through these tokens,
 * so flipping data-theme on <html> re-themes the whole page.
 * Contrast pairs follow the same WCAG targets as light mode. */
:root[data-theme="dark"] {
  /* Text */
  --color-text-primary:    #f5f5f5;
  --color-text-secondary:  #b8b8b8;
  --color-text-tertiary:   #8a8a8a;
  --color-text-disabled:   #4a4a4a;
  --color-text-inverse:    #0f0f0f;
  --color-text-on-image:   #ffffff; /* same as light — photos don't flip with the theme */
  --color-text-heading:    #ffffff;
  --color-text-link:       #4fb8ff;
  --color-text-placeholder:#8a8a8a;
  --color-text-error:      #ef8577;
  --color-text-success:    #7fc789;

  /* Surfaces */
  --color-surface-page:      #0f0f0f;
  --color-surface-secondary: #181818;
  --color-surface-tertiary:  #222222;
  --color-surface-inverse:   #fafafa;
  --color-surface-error:     #3a1e1b;
  --color-surface-success:   #1b2e1d;

  /* Borders */
  --color-border-default:  #2a2a2a;
  --color-border-subtle:   #1a1a1a; /* footer column rules, hairline dividers */
  --color-border-input:    #6a6a6a;
  --color-border-focus:    #4fb8ff;
  --color-border-error:    #ef8577;
  --color-border-success:  #7fc789;
  --color-border-disabled: #2a2a2a;

  /* Accent */
  --color-accent: #4fb8ff;

  /* Buttons — primary inverts (white bg, black text) */
  --btn-p-bg:          #f5f5f5;
  --btn-p-bg-hover:    #ffffff;
  --btn-p-text:        #0f0f0f;
  --btn-g-border:      #f5f5f5;
  --btn-g-bg-hover:    #f5f5f5;
  --btn-g-text-hover:  #0f0f0f;
  --btn-dis-bg:        #222222;
  --btn-dis-text:      #4a4a4a;
  --btn-dis-border:    #2a2a2a;
  --btn-focus-ring:    #4fb8ff;
}