/*
Theme Name: OD Studio
Theme URI: https://oceandevelopersltd.com/
Author: Ocean Developers LTD
Author URI: https://oceandevelopersltd.com/
Description: Custom high-performance dark theme for Ocean Developers LTD, faithfully recreated from the original React application.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: od-studio
*/

/* ==========================================================================
   DESIGN SYSTEM TOKENS (Source: src/index.css)
   ========================================================================== */

:root {
  /* ── Surface Colors (Abyssal Dark Theme) ── */
  --color-base: #07040E;
  --color-surface: #0F0C1B;
  --color-surface-dim: #15121b;
  --color-surface-bright: #1d1a24;
  --color-surface-elevated: #221e28;
  --color-surface-highest: #2c2833;

  /* ── Primary Accents (The Aura) ── */
  --color-primary: #6D28D9;
  --color-primary-light: #d3bbff;
  --color-primary-dim: #3f008d;
  --color-primary-container: #6d28d9;

  /* ── Foreground / Text ── */
  --color-on-surface: #e8e0ee;
  --color-on-surface-variant: #ccc3d7;
  --color-muted: #958da1;

  /* ── Borders ── */
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-hover: rgba(255, 255, 255, 0.14);

  /* ── High Contrast ── */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ── Typography ── */
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ── Layout & Radii ── */
  --spacing-container-max: 1280px;
  --spacing-gutter: 20px;
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ── Floating Header & Clearance Tokens ── */
  --od-nav-height: 68px;
  --od-header-top: 16px;
  --od-header-total: calc(var(--od-header-top) + var(--od-nav-height));
  --od-admin-bar-height: 0px;
  --od-header-clearance: calc(var(--od-admin-bar-height) + var(--od-header-total) + 32px);
}

@media (min-width: 640px) {
  :root {
    --od-nav-height: 72px;
    --od-header-top: 20px;
    --od-header-total: calc(var(--od-header-top) + var(--od-nav-height));
    --od-header-clearance: calc(var(--od-admin-bar-height) + var(--od-header-total) + 36px);
  }
}

@media (min-width: 1024px) {
  :root {
    --od-nav-height: 72px;
    --od-header-top: 24px;
    --od-header-total: calc(var(--od-header-top) + var(--od-nav-height));
    --od-header-clearance: calc(var(--od-admin-bar-height) + var(--od-header-total) + 48px);
  }
}

/* WordPress Admin Bar Compatibility */
body.admin-bar {
  --od-admin-bar-height: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar {
    --od-admin-bar-height: 46px;
  }
}