/*
 * Design Tokens
 *
 * Centralised CSS custom properties driving colour, type, spacing,
 * radii, shadows, motion, and z-index across the theme.
 *
 * Developed by: Rhyll Neri
 */

:root {
  /* --- Brand --- */
  --color-primary:        #005a64;
  --color-primary-dark:   #00424a;
  --color-primary-light:  #0a7382;
  --color-primary-50:     #e6f0f1;

  --color-accent:         #E0922F;
  --color-accent-dark:    #b6741f;
  --color-accent-light:   #f0ad55;
  --color-accent-50:      #fcf2e3;

  /* --- Neutrals --- */
  --color-ink:            #0F1B22;
  --color-slate-900:      #1A2730;
  --color-slate-700:      #3A4751;
  --color-slate-500:      #6A767F;
  --color-slate-300:      #B6BDC2;
  --color-slate-200:      #D7DCDF;
  --color-slate-100:      #EBEEEF;
  --color-mist:           #F4F6F7;
  --color-fog:            #F9FAFB;
  --color-white:          #FFFFFF;
  --color-black:          #000000;

  /* --- Status --- */
  --color-success:        #1C8B5A;
  --color-warning:        #C97A0E;
  --color-error:          #C8362E;
  --color-info:           #1A6DBF;

  /* --- Aliases --- */
  --color-bg:             var(--color-white);
  --color-bg-alt:         var(--color-mist);
  --color-bg-dark:        var(--color-primary);
  --color-text:           var(--color-slate-900);
  --color-text-muted:     var(--color-slate-500);
  --color-text-inverse:   var(--color-white);
  --color-border:         var(--color-slate-200);
  --color-border-strong:  var(--color-slate-300);

  /* --- Typography --- */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-42: 2.625rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-72: 4.5rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-wide:  0.05em;
  --ls-eyebrow: 0.18em;

  /* --- Spacing scale (8pt grid) --- */
  --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-11: 6rem;      /* 96 */
  --space-12: 8rem;      /* 128 */
  --space-13: 10rem;     /* 160 */

  /* --- Layout --- */
  --container-xs:   640px;
  --container-sm:   768px;
  --container-md:   960px;
  --container-lg:   1180px;
  --container-xl:   1320px;
  --container-2xl:  1440px;
  --gutter:         clamp(1rem, 3vw, 2.5rem);
  --section-y:      clamp(4rem, 9vw, 8rem);

  /* --- Radii --- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(15,27,34,0.06);
  --shadow-sm: 0 2px 4px rgba(15,27,34,0.07);
  --shadow-md: 0 8px 24px rgba(15,27,34,0.08);
  --shadow-lg: 0 20px 50px rgba(15,27,34,0.10);
  --shadow-xl: 0 30px 80px rgba(15,27,34,0.14);
  --shadow-ring: 0 0 0 4px rgba(0,90,100,0.12);

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-50:  50ms;
  --dur-100: 100ms;
  --dur-150: 150ms;
  --dur-200: 200ms;
  --dur-300: 300ms;
  --dur-500: 500ms;
  --dur-700: 700ms;

  /* --- z-index --- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  500;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   950;
  --z-top:     999;

  /* --- Header --- */
  --header-height:        88px;
  --header-height-scroll: 72px;
}

@media (max-width: 768px) {
  :root {
    --header-height:        72px;
    --header-height-scroll: 64px;
  }
}