/*
 * variables.css — Shadcn Child design tokens
 *
 * Override any value here to customise the theme without touching the parent.
 *
 * HOW IT WORKS
 * ─────────────────────────────────────────────────────────────────────────────
 * The parent theme (shadcn) registers colors through theme.json which WordPress
 * exposes as  --wp--preset--color--<slug>  CSS custom properties.
 * It then aliases them to short names (--primary, --background, etc.) in :root.
 *
 * To change a color in the child theme you have TWO options:
 *   A) Edit theme.json  → updates the WP editor palette AND the CSS variable
 *   B) Override the --wp--preset--color--* directly here → CSS only, no editor
 *
 * Non-palette variables (--radius, sidebar colours, transitions, etc.) are only
 * in CSS and must be overridden here.
 *
 * SECTIONS
 * ─────────────────────────────────────────────────────────────────────────────
 *  1. Shape & motion
 *  2. Light-mode palette (CSS-only tokens)
 *  3. Light-mode aliases (wp preset → short name)
 *  4. Dark-mode palette overrides (.dark)
 *  5. Typography scale helpers
 *  6. Custom child-theme additions
 */

/* ─── 1. Shape & Motion ───────────────────────────────────────────────────── */
:root {
  --radius: 0.625rem;           /* Base corner radius — tune all radii here  */
  --spacing: 0.25rem;           /* Base spacing unit (multiply by Tailwind scale) */

  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --default-transition-duration: 0.15s;
}

/* ─── 2. Light-mode palette (CSS-only tokens not in theme.json) ───────────── */
:root {
  /* Border / input / ring */
  --wp--preset--color--border: #e0e0e8;
  --wp--preset--color--input:  #e0e0e8;
  --wp--preset--color--ring:   #6d5cff;

  /* Code block */
  --wp--preset--color--code:            #f0f0f5;
  --wp--preset--color--code-foreground: #1a1a27;

  /* Sidebar */
  --wp--preset--color--sidebar:                    #f5f5fa;
  --wp--preset--color--sidebar-foreground:         #3a3a5c;
  --wp--preset--color--sidebar-primary:            #6d5cff;
  --wp--preset--color--sidebar-primary-foreground: #ffffff;
  --wp--preset--color--sidebar-accent:             #ebebf5;
  --wp--preset--color--sidebar-accent-foreground:  #1a1a27;
  --wp--preset--color--sidebar-border:             #e0e0e8;
  --wp--preset--color--sidebar-ring:               #6d5cff;
}

/* ─── 3. Light-mode short aliases ────────────────────────────────────────── */
:root {
  --background:          var(--wp--preset--color--background);
  --foreground:          var(--wp--preset--color--foreground);
  --card:                var(--wp--preset--color--card);
  --card-foreground:     var(--wp--preset--color--card-foreground);
  --popover:             var(--wp--preset--color--popover);
  --popover-foreground:  var(--wp--preset--color--popover-foreground);
  --primary:             var(--wp--preset--color--primary);
  --primary-foreground:  var(--wp--preset--color--primary-foreground);
  --secondary:           var(--wp--preset--color--secondary);
  --secondary-foreground:var(--wp--preset--color--secondary-foreground);
  --muted:               var(--wp--preset--color--muted);
  --muted-foreground:    var(--wp--preset--color--muted-foreground);
  --accent:              var(--wp--preset--color--accent);
  --accent-foreground:   var(--wp--preset--color--accent-foreground);
  --destructive:         var(--wp--preset--color--destructive);
  --destructive-foreground: var(--wp--preset--color--destructive-foreground);
  --border:              var(--wp--preset--color--border);
  --input:               var(--wp--preset--color--input);
  --ring:                var(--wp--preset--color--ring);
  --code:                var(--wp--preset--color--code);
  --code-foreground:     var(--wp--preset--color--code-foreground);

  --sidebar:                    var(--wp--preset--color--sidebar);
  --sidebar-foreground:         var(--wp--preset--color--sidebar-foreground);
  --sidebar-primary:            var(--wp--preset--color--sidebar-primary);
  --sidebar-primary-foreground: var(--wp--preset--color--sidebar-primary-foreground);
  --sidebar-accent:             var(--wp--preset--color--sidebar-accent);
  --sidebar-accent-foreground:  var(--wp--preset--color--sidebar-accent-foreground);
  --sidebar-border:             var(--wp--preset--color--sidebar-border);
  --sidebar-ring:               var(--wp--preset--color--sidebar-ring);
}

/* ─── 4. Dark-mode palette overrides ─────────────────────────────────────── */
.dark {
  /* Core palette — LowlandTech dark canvas */
  --wp--preset--color--background:          #1a1a27;
  --wp--preset--color--foreground:          #f4f5ff;
  --wp--preset--color--card:                #1f1f2e;
  --wp--preset--color--card-foreground:     #f4f5ff;
  --wp--preset--color--popover:             #1f1f2e;
  --wp--preset--color--popover-foreground:  #f4f5ff;
  --wp--preset--color--primary:             #7e6fff;
  --wp--preset--color--primary-foreground:  #ffffff;
  --wp--preset--color--secondary:           #f66426;
  --wp--preset--color--secondary-foreground:#1a1a27;
  --wp--preset--color--muted:               #2a2a3a;
  --wp--preset--color--muted-foreground:    #a0a3b8;
  --wp--preset--color--accent:              #2f2a4f;
  --wp--preset--color--accent-foreground:   #f4f5ff;
  --wp--preset--color--destructive:         #ff5252;

  /* Border / input / ring */
  --wp--preset--color--border: #2f2a4f;
  --wp--preset--color--input:  #2f2a4f;
  --wp--preset--color--ring:   #7e6fff;

  /* Code block */
  --wp--preset--color--code:            #1a1a27;
  --wp--preset--color--code-foreground: #a0a3b8;

  /* Sidebar */
  --wp--preset--color--sidebar:                    #141420;
  --wp--preset--color--sidebar-foreground:         #d9d9f0;
  --wp--preset--color--sidebar-primary:            #7e6fff;
  --wp--preset--color--sidebar-primary-foreground: #ffffff;
  --wp--preset--color--sidebar-accent:             #2a2545;
  --wp--preset--color--sidebar-accent-foreground:  #f4f5ff;
  --wp--preset--color--sidebar-border:             #241f3b;
  --wp--preset--color--sidebar-ring:               #7e6fff;
}

/* ─── 5. Typography scale line-height helpers ─────────────────────────────── */
:root {
  --text-xs--line-height:   calc(1 / 0.75);
  --text-sm--line-height:   calc(1.25 / 0.875);
  --text-base--line-height: calc(1.5 / 1);
  --text-lg--line-height:   calc(1.75 / 1.125);
  --text-xl--line-height:   calc(1.75 / 1.25);
  --text-2xl--line-height:  calc(2 / 1.5);
  --text-3xl--line-height:  calc(2.25 / 1.875);
  --text-4xl--line-height:  calc(2.5 / 2.25);
  --text-5xl--line-height:  1;
  --text-7xl--line-height:  1;
}

/* ─── 6. Child-theme additions ────────────────────────────────────────────── */
/*
 * Add your own custom properties below.
 * Example:
 *
 *   :root {
 *     --brand-hero-bg:   #f0f4ff;
 *     --card-shadow:     0 4px 24px rgba(0,0,0,.08);
 *   }
 *   .dark {
 *     --brand-hero-bg:   #0d1117;
 *   }
 */