/*
Theme Name: Outbox
Theme URI: https://outbox.com
Author: Triumworks
Description: Official Outbox website theme
Version: 1.0.137
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
Text Domain: outbox
*/

/* =============================================
   DESIGN TOKENS — from Figma: OUL Website
   ============================================= */
:root {
  /* Primary blue */
  --color-primary:        #00537d;
  --color-primary-mid:    #0092c8;
  --color-primary-light:  #29a3dc;
  --color-primary-pale:   #70caff;
  --color-primary-bg:     #edffff;

  /* Accent gold */
  --color-accent:         #ddb23d;
  --color-accent-dark:    #c9a238;
  --color-accent-bg:      #fffaeb;
  --color-accent-bg-mid:  #fcf7ec;

  /* Green */
  --color-green:          #59962f;
  --color-green-dark:     #457424;
  --color-green-darker:   #35591c;
  --color-green-light:    #72c03c;
  --color-green-bg:       #f2fbec;

  /* Pink — from the logo's "u" (#EE2565); -dark is a deepened shade for use
     as a background behind white text (the logo pink itself is too light
     for that at proper contrast). */
  --color-pink:           #ee2565;
  --color-pink-dark:      #9c1a45;

  /* Status / semantic */
  --color-error:          #c72f4d;
  --color-error-dark:     #760a0a;
  --color-error-bg:       #fdecef;

  /* Text */
  --color-text:           #181d27;
  --color-text-secondary: #414651;
  --color-text-tertiary:  #535862;
  --color-text-muted:     #717680;
  --color-text-placeholder: #a4a7ae;

  /* Borders & surfaces */
  --color-border:         #d5d7da;
  --color-border-light:   #e5e7eb;
  --color-surface:        #fafafa;
  --color-surface-mid:    #f5f5f5;
  --color-white:          #ffffff;
  --color-black:          #000000;

  /* Typography */
  --font-primary:   'Inter', sans-serif;
  --font-secondary: 'Roboto', sans-serif;

  --text-xs:   14px;
  --text-sm:   16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  72px;

  --leading-tight:  -0.03em;
  --leading-normal: 0;

  /* Spacing scale */
  --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;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 80px;
  --container-pad-mobile: 20px;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 12px 24px rgba(0, 0, 0, 0.10);

  /* Transitions */
  --transition: 0.2s ease;
}