/* ==========================================================================
   IIMAD Design System — Token Bundle
   Merged from tokens/colors.css + tokens/typography.css + tokens/spacing.css
   Loaded after app.css so custom properties are available for overrides.
   ========================================================================== */

:root {
  /* ── Brand: Primary (Earthy Brown) ─────────────────────────────────────── */
  --color-primary:          #2E180B;
  --color-primary-hover:    #281509;
  --color-primary-light:    #5C3A20;
  --color-primary-subtle:   #8B6B4A;

  /* ── Brand: Accent (Bright Yellow) ─────────────────────────────────────── */
  --color-accent:           #FFBC50;
  --color-accent-light:     #FFD98A;
  --color-accent-dark:      #CC8800;

  /* ── Neutrals ──────────────────────────────────────────────────────────── */
  --color-black:            #0a0a0a;
  --color-gray-900:         #1a1a1a;
  --color-gray-700:         #515154;
  --color-gray-500:         #86868b;
  --color-gray-300:         #cacace;
  --color-gray-100:         #FBFBFD;
  --color-white:            #fefefe;

  /* ── Semantic ──────────────────────────────────────────────────────────── */
  --color-error:            #cc4b37;
  --color-error-bg:         #f9ecea;
  --color-success:          #3adb76;
  --color-success-bg:       #e1faea;
  --color-warning:          #ffae00;
  --color-warning-bg:       #fff3d6;
  --color-info:             #1779ba;
  --color-info-bg:          #d7ecf7;

  /* ── Surface & Text Aliases ────────────────────────────────────────────── */
  --surface-page:           var(--color-white);
  --surface-card:           var(--color-white);
  --surface-muted:          var(--color-gray-100);
  --surface-overlay:        rgba(46, 24, 11, 0.85);
  --surface-footer:         var(--color-primary);

  --text-primary:           var(--color-black);
  --text-secondary:         var(--color-gray-700);
  --text-tertiary:          var(--color-gray-500);
  --text-inverse:           var(--color-white);
  --text-link:              var(--color-primary);
  --text-link-hover:        var(--color-primary-hover);

  --border-default:         var(--color-gray-500);
  --border-light:           var(--color-gray-300);
  --border-focus:           var(--color-gray-700);

  /* ── Font Families ─────────────────────────────────────────────────────── */
  --font-sans:              "Roboto", Helvetica, Arial, sans-serif;
  --font-serif:             "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-mono:              Consolas, "Liberation Mono", Courier, monospace;
  --font-body:              var(--font-sans);
  --font-heading:           var(--font-sans);
  --font-display:           var(--font-serif);
  --font-quote:             var(--font-serif);

  /* ── Font Sizes ────────────────────────────────────────────────────────── */
  --text-xs:                0.75rem;
  --text-sm:                0.8125rem;
  --text-base:              1rem;
  --text-lg:                1.0625rem;
  --text-xl:                1.125rem;
  --text-2xl:               1.25rem;
  --text-3xl:               1.5rem;
  --text-4xl:               1.9375rem;
  --text-5xl:               2.5rem;
  --text-6xl:               3rem;

  /* ── Font Weights ──────────────────────────────────────────────────────── */
  --weight-thin:            100;
  --weight-light:           300;
  --weight-regular:         400;
  --weight-medium:          500;
  --weight-bold:            700;
  --weight-black:           900;

  /* ── Line Heights ──────────────────────────────────────────────────────── */
  --leading-tight:          1.2;
  --leading-normal:         1.4;
  --leading-relaxed:        1.5;
  --leading-loose:          1.6;
  --leading-label:          1.8;

  /* ── Letter Spacing ────────────────────────────────────────────────────── */
  --tracking-tight:         -0.01em;
  --tracking-normal:        0;
  --tracking-wide:          0.025em;
  --tracking-wider:         0.05em;
  --tracking-caps:          0.08em;

  /* ── Spacing Scale ─────────────────────────────────────────────────────── */
  --space-0:                0;
  --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:          81.25rem;
  --container-padding-sm:   0.625rem;
  --container-padding-md:   0.9375rem;
  --grid-gutter:            1.875rem;

  /* ── Border Radii ──────────────────────────────────────────────────────── */
  --radius-none:            0;
  --radius-sm:              2px;
  --radius-md:              4px;
  --radius-lg:              8px;
  --radius-xl:              10px;
  --radius-full:            9999px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-none:            none;
  --shadow-xs:              0 1px 2px rgba(10, 10, 10, 0.08);
  --shadow-sm:              0 2px 4px rgba(10, 10, 10, 0.1);
  --shadow-md:              0 4px 8px rgba(10, 10, 10, 0.12);
  --shadow-lg:              0 8px 16px rgba(10, 10, 10, 0.15);
  --shadow-inset:           inset 0 1px 2px rgba(10, 10, 10, 0.1);

  /* ── Transitions ───────────────────────────────────────────────────────── */
  --ease-default:           ease-in-out;
  --duration-fast:          150ms;
  --duration-normal:        250ms;
  --duration-slow:          500ms;
  --transition-colors:      color var(--duration-normal) var(--ease-default),
                            background-color var(--duration-normal) var(--ease-default),
                            border-color var(--duration-normal) var(--ease-default);
  --transition-all:         all var(--duration-normal) var(--ease-default);
}