/**
 * clarity-tokens.css — Clarity Systems Design Token Overrides
 *
 * Overrides Bootstrap 5 CSS custom properties (--bs-*) with Clarity Systems
 * brand values, then defines the full Clarity brand token set from
 * docs/brand/style-contract.md.
 *
 * Load order: bootstrap.min.css → clarity-tokens.css → clarity-theme.css
 *
 * Do NOT hardcode hex values in templates or component CSS.
 * Always reference var(--bs-*) or var(--color-*) from this file.
 */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── Bootstrap 5 Custom Property Overrides ────────────────────────────────── */
:root {
  /* Colour — primary */
  --bs-primary:                  #1a56db;
  --bs-primary-rgb:              26, 86, 219;

  /* Colour — secondary */
  --bs-secondary:                #6b21a8;
  --bs-secondary-rgb:            107, 33, 168;

  /* Colour — feedback */
  --bs-success:                  #16a34a;
  --bs-success-rgb:              22, 163, 74;
  --bs-danger:                   #dc2626;
  --bs-danger-rgb:               220, 38, 38;
  --bs-warning:                  #d97706;
  --bs-warning-rgb:              217, 119, 6;
  --bs-info:                     #0284c7;
  --bs-info-rgb:                 2, 132, 199;

  /* Typography */
  --bs-body-font-family:         'Inter', 'Helvetica Neue', Arial, sans-serif;
  --bs-font-sans-serif:          'Inter', 'Helvetica Neue', Arial, sans-serif;
  --bs-font-monospace:           'JetBrains Mono', 'Courier New', monospace;
  --bs-body-color:               #111827;
  --bs-body-bg:                  #ffffff;

  /* Links */
  --bs-link-color:               #1a56db;
  --bs-link-hover-color:         #1340a8;

  /* Borders */
  --bs-border-color:             #e5e7eb;
  --bs-border-radius:            0.375rem;
  --bs-border-radius-sm:         0.25rem;
  --bs-border-radius-lg:         0.75rem;
}

/* ── Clarity Brand Tokens (mirrors style-contract.md §2) ──────────────────── */
:root {
  /* Brand palette */
  --color-primary:               #1a56db;
  --color-primary-dark:          #1340a8;
  --color-primary-light:         #e8effd;

  --color-secondary:             #6b21a8;
  --color-secondary-dark:        #581c87;

  /* Neutrals */
  --color-bg:                    #ffffff;
  --color-surface:               #f9fafb;
  --color-border:                #e5e7eb;

  /* Text */
  --color-text-primary:          #111827;
  --color-text-secondary:        #6b7280;
  --color-text-inverse:          #ffffff;

  /* Links */
  --color-link:                  #1a56db;
  --color-link-hover:            #1340a8;

  /* Feedback — base */
  --color-success:               #16a34a;
  --color-warning:               #d97706;
  --color-error:                 #dc2626;
  --color-info:                  #0284c7;

  /* Feedback — dark hover states */
  --color-success-dark:          #15803d;
  --color-warning-dark:          #b45309;
  --color-error-dark:            #b91c1c;
  --color-info-dark:             #0369a1;

  /* Feedback — alert surfaces */
  --color-success-bg:            #f0fdf4;
  --color-success-border:        #bbf7d0;
  --color-success-text:          #15803d;
  --color-warning-bg:            #fffbeb;
  --color-warning-border:        #fde68a;
  --color-warning-text:          #92400e;
  --color-error-bg:              #fef2f2;
  --color-error-border:          #fecaca;
  --color-error-text:            #b91c1c;
  --color-info-bg:               #f0f9ff;
  --color-info-border:           #bae6fd;
  --color-info-text:             #0369a1;

  /* Header */
  --color-header-bg:             #ffffff;
  --color-header-border:         #e5e7eb;

  /* Footer */
  --color-footer-bg:             #111827;
  --color-footer-text:           #d1d5db;
  --color-footer-link:           #9ca3af;
  --color-footer-link-hover:     #ffffff;

  /* Typography scale */
  --font-primary:                'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:                   'JetBrains Mono', 'Courier New', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;

  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  --leading-tight:    1.2;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;

  /* Spacing (4px grid) */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* Layout */
  --container-max-width:    1280px;
  --container-padding-x:    var(--space-6);
  --section-padding-y:      var(--space-16);
  --card-padding:           var(--space-6);
  --border-radius-sm:       4px;
  --border-radius-md:       6px;
  --border-radius-lg:       12px;
  --header-height:          80px;
  --header-height-mobile:   56px;
  --footer-approx-height:   280px;

  /* Translucent border colours */
  --color-primary-border-alpha:   rgba(26, 86, 219, 0.2);
  --color-secondary-border-alpha: rgba(107, 33, 168, 0.2);
  --color-footer-divider:         rgba(255, 255, 255, 0.1);

  /* Shadows */
  --shadow-focus-primary:   0 0 0 3px rgba(26, 86, 219, 0.15);
  --shadow-focus-error:     0 0 0 3px rgba(220, 38, 38, 0.15);
  --shadow-focus-success:   0 0 0 3px rgba(22, 163, 74, 0.15);
  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:              0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg:              0 10px 15px rgba(0, 0, 0, 0.1);
}