@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Default: Architectural Light Concrete & Obsidian */
  --primary: #141413;           /* Deep architectural carbon for primary actions */
  --primary-hover: #b45309;     /* Warm deep gold hover state */
  --secondary: #b45309;         /* Rich burnished gold for secondary accents and badges */
  --secondary-hover: #92400e;   /* Deeper antique gold for hover interactions */
  
  /* Department Color Themes (Configurable via Admin) */
  --color-studio: #d97706;      /* Studio Gold */
  --color-software: #d97706;    /* Software Lab Amber/Gold */
  --color-design: #a855f7;      /* Graphic Design & Video Editing Lab Electric Violet */
  --color-marketing: #059669;   /* Digital Marketing Lab Emerald */

  --accent: #d97706;            /* Active page accent */
  --accent-light: #f59e0b;      /* Luminous gold for sparks, dots, and active indicators */
  --accent-soft: rgba(217, 119, 6, 0.12); /* Translucent accent wash */

  /* Canvas / Concrete & Alabaster Surfaces (Light Mode) */
  --bg-main: #fafaf8;           /* Warm gallery white / light concrete wash */
  --bg-surface: #ffffff;        /* Pure architectural white for elevated slabs and cards */
  --bg-surface-hover: #f4f3ef;  /* Soft warm-concrete hover state */
  --bg-color: #eeede9;          /* Raw cast concrete gray canvas with subtle warmth */
  --bg-card: #ffffff;
  --bg-tag: rgba(20, 20, 19, 0.05);

  /* Structural Hairlines & Borders */
  --border-subtle: #dcdad3;     /* Exposed concrete joint hairline */
  --border-strong: #a8a49b;     /* Distinct structural border for active outlines */

  /* Typography */
  --text-main: #141413;         /* High-contrast architectural ink */
  --text-primary: #141413;      /* Body text */
  --text-muted: #68665e;        /* Balanced stone gray for secondary copy and specs */
  --text-inverse: #fafaf8;      /* Alabaster text on dark surfaces */

  /* Animation Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);

  --font-main: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --border-radius: 4px;

  --font-size-small: 0.75rem;   /* 12px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-large: 1.25rem;   /* 20px */
  --font-size-xlarge: 1.5rem;   /* 24px */
  --font-size-xxlarge: 2rem;    /* 32px */
  --font-size-xxxlarge: 3rem;   /* 48px */
}

/* ==========================================================================
   Automatic Device / Browser Dark Mode Sync
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-main: #0e0e0d;
    --bg-surface: #181817;
    --bg-surface-hover: #222220;
    --bg-color: #121211;
    --bg-card: #181817;
    --bg-tag: rgba(255, 255, 255, 0.06);

    --border-subtle: #2d2c28;
    --border-strong: #4a4841;

    --text-main: #f4f3ef;
    --text-primary: #f4f3ef;
    --text-muted: #9e9b91;
    --text-inverse: #141413;

    --primary: #f4f3ef;
    --primary-hover: var(--accent);
  }
}

/* Explicit Manual Theme Overrides (Admin Forced or Toggle) */
html[data-theme="dark"] {
  --bg-main: #0e0e0d;
  --bg-surface: #181817;
  --bg-surface-hover: #222220;
  --bg-color: #121211;
  --bg-card: #181817;
  --bg-tag: rgba(255, 255, 255, 0.06);

  --border-subtle: #2d2c28;
  --border-strong: #4a4841;

  --text-main: #f4f3ef;
  --text-primary: #f4f3ef;
  --text-muted: #9e9b91;
  --text-inverse: #141413;

  --primary: #f4f3ef;
  --primary-hover: var(--accent);
}

html[data-theme="light"] {
  --bg-main: #fafaf8;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f4f3ef;
  --bg-color: #eeede9;
  --bg-card: #ffffff;
  --bg-tag: rgba(20, 20, 19, 0.05);

  --border-subtle: #dcdad3;
  --border-strong: #a8a49b;

  --text-main: #141413;
  --text-primary: #141413;
  --text-muted: #68665e;
  --text-inverse: #fafaf8;

  --primary: #141413;
  --primary-hover: #b45309;
}