/**
 * TAMUK Foundation Design Tokens
 *
 * CSS Custom Properties for the entire design system.
 * Based on Texas A&M University-Kingsville Graphic Standards (March 2022).
 *
 * Colors:
 *   Blue  PMS 286  → #003399
 *   Gold  PMS 123  → #FCC10F
 *   Terra Cotta PMS 186 → #AF001D
 *
 * Typography:
 *   Headings: Cinzel (Google Font, closest web match to Trajan Pro)
 *   Body:     Source Sans 3 (Google Font, modern readable sans-serif)
 */

:root {
	/* ===========================
	   Brand Colors
	   =========================== */
	--tamuk-blue:           #003399;
	--tamuk-blue-dark:      #002266;
	--tamuk-blue-light:     #1a4db3;
	--tamuk-blue-lightest:  #e6edf7;

	--tamuk-gold:           #FCC10F;
	--tamuk-gold-dark:      #C89B00; /* Darker variant for AA contrast on blue */
	--tamuk-gold-light:     #FDDA6A;
	--tamuk-gold-lightest:  #FFF8E1;

	--tamuk-terra-cotta:       #AF001D;
	--tamuk-terra-cotta-dark:  #8B0017;
	--tamuk-terra-cotta-light: #D4344A;

	/* ===========================
	   Neutral Colors
	   =========================== */
	--tamuk-white:      #FFFFFF;
	--tamuk-gray-50:    #F9FAFB;
	--tamuk-gray-100:   #F3F4F6;
	--tamuk-gray-200:   #E5E7EB;
	--tamuk-gray-300:   #D1D5DB;
	--tamuk-gray-400:   #9CA3AF;
	--tamuk-gray-500:   #6B7280;
	--tamuk-gray-600:   #4B5563;
	--tamuk-gray-700:   #374151;
	--tamuk-gray-800:   #1F2937;
	--tamuk-gray-900:   #111827;
	--tamuk-black:      #000000;

	/* ===========================
	   Semantic Colors
	   =========================== */
	--color-primary:     var(--tamuk-blue);
	--color-secondary:   var(--tamuk-gold);
	--color-accent:      var(--tamuk-terra-cotta);
	--color-success:     #059669;
	--color-warning:     #D97706;
	--color-error:       #DC2626;
	--color-info:        var(--tamuk-blue-light);

	--color-text:        var(--tamuk-gray-800);
	--color-text-light:  var(--tamuk-gray-600);
	--color-text-muted:  var(--tamuk-gray-500);
	--color-text-inverse: var(--tamuk-white);

	--color-bg:          var(--tamuk-white);
	--color-bg-alt:      var(--tamuk-gray-50);
	--color-bg-dark:     var(--tamuk-blue);
	--color-bg-overlay:  rgba(0, 51, 153, 0.85);

	--color-border:      var(--tamuk-gray-200);
	--color-border-dark: var(--tamuk-gray-300);

	/* ===========================
	   Typography
	   =========================== */
	--font-heading:  'Cinzel', 'Trajan Pro', 'Times New Roman', Georgia, serif;
	--font-body:     'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono:     'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

	/* Type Scale (Major Third – 1.25) */
	--text-xs:    0.8125rem;  /* 13px */
	--text-sm:    0.9375rem;  /* 15px */
	--text-base:  1.0625rem;  /* 17px */
	--text-md:    1.1875rem;  /* 19px */
	--text-lg:    1.3125rem;  /* 21px */
	--text-xl:    1.5rem;     /* 24px */
	--text-2xl:   1.875rem;   /* 30px */
	--text-3xl:   2.25rem;    /* 36px */
	--text-4xl:   3rem;       /* 48px */
	--text-5xl:   3.75rem;    /* 60px */

	--leading-tight:   1.2;
	--leading-snug:    1.35;
	--leading-normal:  1.6;
	--leading-relaxed: 1.75;

	--tracking-tight:  -0.025em;
	--tracking-normal: 0;
	--tracking-wide:   0.025em;
	--tracking-wider:  0.05em;
	--tracking-widest: 0.1em;

	/* Font Weights */
	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-bold:     700;
	--weight-black:    900;

	/* ===========================
	   Spacing Scale
	   =========================== */
	--space-0:   0;
	--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-8:   2rem;      /* 32px */
	--space-10:  2.5rem;    /* 40px */
	--space-12:  3rem;      /* 48px */
	--space-16:  4rem;      /* 64px */
	--space-20:  5rem;      /* 80px */
	--space-24:  6rem;      /* 96px */
	--space-32:  8rem;      /* 128px */

	/* ===========================
	   Layout
	   =========================== */
	--container-sm:   640px;
	--container-md:   768px;
	--container-lg:   1024px;
	--container-xl:   1280px;
	--container-2xl:  1440px;
	--container-max:  1600px;

	--gutter:         var(--space-6);
	--gutter-lg:      var(--space-8);

	/* ===========================
	   Borders & Radius
	   =========================== */
	--radius-sm:   0.25rem;   /* 4px */
	--radius-md:   0.5rem;    /* 8px */
	--radius-lg:   0.75rem;   /* 12px */
	--radius-xl:   1rem;      /* 16px */
	--radius-full: 9999px;

	--border-width: 1px;
	--border-width-2: 2px;
	--border-width-4: 4px;

	/* ===========================
	   Shadows
	   =========================== */
	--shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

	/* ===========================
	   Transitions
	   =========================== */
	--transition-fast:   150ms ease;
	--transition-base:   250ms ease;
	--transition-slow:   350ms ease;
	--transition-slower: 500ms ease;

	/* ===========================
	   Z-Index Scale
	   =========================== */
	--z-below:    -1;
	--z-base:     0;
	--z-above:    1;
	--z-sticky:   100;
	--z-header:   200;
	--z-dropdown: 300;
	--z-overlay:  400;
	--z-modal:    500;
	--z-toast:    600;
	--z-skip:     9999;

	/* ===========================
	   Focus Ring (ADA)
	   =========================== */
	--focus-ring-color:  var(--tamuk-gold);
	--focus-ring-width:  3px;
	--focus-ring-offset: 2px;
	--focus-ring-style:  var(--focus-ring-width) solid var(--focus-ring-color);

	/* ===========================
	   Breakpoints (reference only -- used in media queries)
	   Mobile-first approach
	   =========================== */
	/* --bp-sm:  640px;  */
	/* --bp-md:  768px;  */
	/* --bp-lg:  1024px; */
	/* --bp-xl:  1280px; */
	/* --bp-2xl: 1440px; */
}