/* ==========================================================================
   PDFDad — themes.css
   Design tokens + light/dark theme definitions.

   >>> BRAND CUSTOMISATION <<<
   Everything visual about the brand lives in the CONFIG BLOCK below.
   Change --brand-h / --brand-s / --brand-l to re-skin the whole site,
   or override --primary directly with any colour you like.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONFIG BLOCK — edit these four lines to rebrand
   -------------------------------------------------------------------------- */
:root {
  --brand-h: 243;          /* hue        — 243 = indigo. 0 = red, 160 = teal   */
  --brand-s: 75%;          /* saturation — how vivid the accent is             */
  --brand-l: 59%;          /* lightness  — light-theme accent lightness        */
  --brand-radius: 12px;    /* corner roundness for cards, inputs, buttons      */
}

/* --------------------------------------------------------------------------
   Non-colour tokens (identical in both themes)
   -------------------------------------------------------------------------- */
:root {
  /* Spacing — 8px scale */
  --sp-1: 0.25rem;  /*  4px */
  --sp-2: 0.5rem;   /*  8px */
  --sp-3: 0.75rem;  /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-5: 1.5rem;   /* 24px */
  --sp-6: 2rem;     /* 32px */
  --sp-7: 3rem;     /* 48px */
  --sp-8: 4rem;     /* 64px */
  --sp-9: 6rem;     /* 96px */

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: var(--brand-radius);
  --r-xl: 20px;
  --r-full: 999px;

  /* Fluid type scale */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-xl:   clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);
  --fs-2xl:  clamp(1.65rem, 1.4rem + 1.2vw, 2.15rem);
  --fs-3xl:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-4xl:  clamp(2.35rem, 1.7rem + 3.1vw, 3.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.65;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 150ms;
  --t-base: 200ms;
  --t-slow: 250ms;

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --header-h: 68px;

  /* z-index scale */
  --z-dropdown: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-banner: 600;
}

/* --------------------------------------------------------------------------
   LIGHT THEME (default)
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:             #ffffff;
  --bg-elevated:    #f7f8fb;
  --bg-sunken:      #eef0f6;
  --surface:        #ffffff;
  --surface-hover:  #f4f5fa;
  --surface-active:  #eceefa;

  --text:           #12141c;
  --text-strong:    #05060b;
  --text-muted:     #5b6176;
  --text-faint:     #868ca1;
  --text-on-primary:#ffffff;

  --border:         #e2e5ee;
  --border-strong:  #cbd0de;
  --border-focus:   var(--primary);

  --primary:        hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --primary-hover:  hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 8%));
  --primary-active: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 14%));
  --primary-soft:   hsl(var(--brand-h) var(--brand-s) 96%);
  --primary-soft-2: hsl(var(--brand-h) var(--brand-s) 92%);
  --primary-text:   hsl(var(--brand-h) calc(var(--brand-s) - 10%) 38%);

  --success:        #0f7a4d;
  --success-soft:   #e6f6ee;
  --warning:        #a05a00;
  --warning-soft:   #fdf2e0;
  --danger:         #c02626;
  --danger-soft:    #fdeaea;
  --info:           #0b6bb5;
  --info-soft:      #e7f2fb;

  --shadow-sm: 0 1px 2px rgba(16, 20, 40, 0.06), 0 1px 3px rgba(16, 20, 40, 0.05);
  --shadow:    0 2px 4px rgba(16, 20, 40, 0.05), 0 4px 12px rgba(16, 20, 40, 0.07);
  --shadow-lg: 0 8px 24px rgba(16, 20, 40, 0.10), 0 2px 6px rgba(16, 20, 40, 0.06);
  --shadow-xl: 0 20px 48px rgba(16, 20, 40, 0.16), 0 4px 12px rgba(16, 20, 40, 0.08);
  --shadow-primary: 0 8px 24px hsl(var(--brand-h) var(--brand-s) var(--brand-l) / 0.28);

  --overlay: rgba(10, 12, 24, 0.5);
  --skeleton: linear-gradient(90deg, #eceef5 25%, #f6f7fb 50%, #eceef5 75%);
  --canvas-checker-a: #f0f1f6;
  --canvas-checker-b: #ffffff;
}

/* --------------------------------------------------------------------------
   DARK THEME
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --brand-l: 68%;   /* lift the accent so it stays AA on a dark surface */

  --bg:             #0c0e16;
  --bg-elevated:    #12151f;
  --bg-sunken:      #080a11;
  --surface:        #161a26;
  --surface-hover:  #1d2130;
  --surface-active: #242939;

  --text:           #e8eaf2;
  --text-strong:    #ffffff;
  --text-muted:     #a2a8bd;
  --text-faint:     #767d95;
  --text-on-primary:#0a0c14;

  --border:         #262b3b;
  --border-strong:  #394055;
  --border-focus:   var(--primary);

  --primary:        hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --primary-hover:  hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 7%));
  --primary-active: hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 12%));
  --primary-soft:   hsl(var(--brand-h) 30% 17%);
  --primary-soft-2: hsl(var(--brand-h) 32% 22%);
  --primary-text:   hsl(var(--brand-h) var(--brand-s) 78%);

  --success:        #4ade80;
  --success-soft:   #0f2a1d;
  --warning:        #fbbf24;
  --warning-soft:   #2d2110;
  --danger:         #f87171;
  --danger-soft:    #2e1416;
  --info:           #60a5fa;
  --info-soft:      #0f1f33;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 2px 6px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.65);
  --shadow-primary: 0 8px 28px hsl(var(--brand-h) var(--brand-s) 45% / 0.45);

  --overlay: rgba(0, 0, 0, 0.66);
  --skeleton: linear-gradient(90deg, #1a1f2d 25%, #232938 50%, #1a1f2d 75%);
  --canvas-checker-a: #1a1f2d;
  --canvas-checker-b: #12151f;
}

/* --------------------------------------------------------------------------
   Category accents — used ONLY for tool-card icon backgrounds
   -------------------------------------------------------------------------- */
:root {
  --cat-organize:  #6366f1;
  --cat-optimize:  #0ea5e9;
  --cat-to-pdf:    #10b981;
  --cat-from-pdf:  #d97706;
  --cat-edit:      #ec4899;
  --cat-security:  #ef4444;
}
[data-theme="dark"] {
  --cat-organize:  #818cf8;
  --cat-optimize:  #38bdf8;
  --cat-to-pdf:    #34d399;
  --cat-from-pdf:  #fbbf24;
  --cat-edit:      #f472b6;
  --cat-security:  #f87171;
}

/* --------------------------------------------------------------------------
   Theme transition — suppressed until theme.js removes .theme-booting
   (stops the 200ms crossfade from firing on first paint)
   -------------------------------------------------------------------------- */
html:not(.theme-booting) body,
html:not(.theme-booting) .themed {
  transition: background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
html.theme-booting *,
html.theme-booting *::before,
html.theme-booting *::after {
  transition: none !important;
}