/* ==========================================================================
   Manila Core — Design Tokens
   Source: Claude Design → "Manila Core Design System"
           project d8dc51e2-557a-4765-846a-fc3e48bd29dd
   Concatenated from tokens/{colors,typography,spacing,shadows}.css

   Do not hand-edit values here. Change them in the design system and re-sync
   so the app and the design system cannot drift apart.
   ========================================================================== */

/* Fonts are <link>ed from index.html rather than @import-ed here — a chained
   @import would serialise the font request behind this stylesheet. */

:root {
  /* ── Brand Primaries ── */
  --color-navy:         #010016;
  --color-gold:         #F8C830;
  --color-blue:         #123868;

  /* ── Extended Brand ── */
  --color-navy-soft:    #0a0a2e;
  --color-navy-muted:   #0d0d3d;
  --color-gold-light:   #FBDA6B;
  --color-gold-muted:   #E5B820;
  --color-gold-dark:    #C9A020;
  --color-blue-light:   #1a4f8a;
  --color-blue-dark:    #0d2550;

  /* ── Neutrals ── */
  --color-white:        #FFFFFF;
  --color-off-white:    #F8F7F2;
  --color-gray-100:     #F2F2F0;
  --color-gray-200:     #E4E4E0;
  --color-gray-300:     #D4D4D0;
  --color-gray-400:     #A8A8A8;
  --color-gray-500:     #888888;
  --color-gray-600:     #666666;
  --color-gray-700:     #444444;
  --color-charcoal:     #111111;

  /* ── Semantic Surfaces ── */
  --surface-dark:       var(--color-navy);
  --surface-dark-alt:   var(--color-navy-soft);
  --surface-mid:        var(--color-blue);
  --surface-light:      var(--color-off-white);
  --surface-white:      var(--color-white);

  /* ── Semantic Text ── */
  --text-primary:       var(--color-charcoal);
  --text-secondary:     var(--color-gray-600);
  --text-inverse:       var(--color-white);
  --text-gold:          var(--color-gold);
  --text-navy:          var(--color-navy);

  /* ── Semantic Borders ── */
  --border-default:     rgba(168, 168, 168, 0.25);
  --border-gold:        rgba(248, 200, 48, 0.40);
  --border-gold-solid:  var(--color-gold);
  --border-white:       rgba(255, 255, 255, 0.15);
  --border-dark:        rgba(1, 0, 22, 0.12);

  /* ── Semantic Accent ── */
  --accent-hover:       var(--color-gold-light);
  --accent-press:       var(--color-gold-dark);

  /* ── Font Families ── */
  --font-serif:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:     'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Type Scale ── */
  --text-xs:    0.6875rem;   /* 11px */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  1rem;        /* 16px */
  --text-lg:    1.125rem;    /* 18px */
  --text-xl:    1.25rem;     /* 20px */
  --text-2xl:   1.5rem;      /* 24px */
  --text-3xl:   1.875rem;    /* 30px */
  --text-4xl:   2.25rem;     /* 36px */
  --text-5xl:   3rem;        /* 48px */
  --text-6xl:   3.75rem;     /* 60px */
  --text-7xl:   4.5rem;      /* 72px */

  /* ── Line Heights ── */
  --leading-none:     1;
  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.55;
  --leading-relaxed:  1.7;
  --leading-loose:    1.9;

  /* ── Letter Spacing ── */
  --tracking-tightest: -0.03em;
  --tracking-tight:    -0.01em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.14em;
  --tracking-caps:      0.10em;   /* use for uppercase labels */

  /* ── Font Weights ── */
  --font-light:      300;
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;
  --font-black:      900;

  /* ── Base Scale (4px unit) ── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */

  /* ── Layout ── */
  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow:  860px;
  --container-xs:      560px;
  --section-pad-y:       5rem;   /* 80px vertical section padding */
  --section-pad-x:       2rem;   /* 32px horizontal gutter */

  /* ── Border Radius ── */
  --radius-xs:   1px;
  --radius-sm:   2px;
  --radius-mc:   4px;   /* renamed from --radius: the app owns that name */
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ── Z-Index ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Elevation (on light surfaces) ── */
  --shadow-xs:   0 1px 2px rgba(1, 0, 22, 0.08);
  --shadow-mc-sm: 0 1px 4px rgba(1, 0, 22, 0.10);
  --shadow-mc:    0 2px 8px rgba(1, 0, 22, 0.14);
  --shadow-md:   0 4px 16px rgba(1, 0, 22, 0.18);
  --shadow-lg:   0 8px 32px rgba(1, 0, 22, 0.22);
  --shadow-xl:   0 16px 48px rgba(1, 0, 22, 0.30);
  --shadow-2xl:  0 24px 64px rgba(1, 0, 22, 0.40);

  /* ── Gold Glow ── */
  --shadow-gold-sm:  0 0 12px rgba(248, 200, 48, 0.18);
  --shadow-gold:     0 2px 20px rgba(248, 200, 48, 0.22);
  --shadow-gold-lg:  0 4px 36px rgba(248, 200, 48, 0.30);

  /* ── Dark surface shadows (on navy/dark) ── */
  --shadow-dark-sm:  0 1px 4px rgba(0, 0, 0, 0.35);
  --shadow-dark:     0 2px 12px rgba(0, 0, 0, 0.45);
  --shadow-dark-lg:  0 8px 32px rgba(0, 0, 0, 0.55);

  /* ── Inset ── */
  --shadow-inset-sm:  inset 0 1px 2px rgba(1, 0, 22, 0.10);
  --shadow-inset:     inset 0 2px 6px rgba(1, 0, 22, 0.15);

  /* ── Transitions ── */
  --transition-fast:    150ms ease;
  --transition:         200ms ease;
  --transition-slow:    300ms ease;
  --transition-slower:  400ms ease;
}