:root {

  --bg:               #0b0b0e;  /* page background base (see --page-grad)       */
  --surface:          #131318;  /* cards / panels                               */
  --surface-elevated: #1a1a20;  /* hovered cards, dropdowns, inner boxes        */
  --border:           rgba(255,255,255,0.10);  /* 1px hairline dividers         */
  --border-subtle:    rgba(255,255,255,0.07);  /* secondary / card dividers     */

  /* ---- Text — design ink scale ---- */
  --fg:        #f0f0f2;  /* headings, primary text, key numbers           */
  --text-body: #b9bac0;  /* body / paragraph copy — html default          */
  --fg-muted:  #8c8c93;  /* secondary text, descriptions                  */
  --fg-subtle: #6e6e75;  /* tertiary: timestamps, hints (large text only) */

  /* CTA fills → --cta-bg. Interactive affordances → role aliases below.     */
  --accent:        var(--fg);            /* near-white dark / near-black light; use role aliases  */
  --accent-hover:  var(--cta-hover);     /* → #D2D4D7 dark / #2B2D32 light                        */
  --accent-soft:   var(--fg-muted);      /* subtle badge tint only                                 */
  --on-accent:     var(--cta-text);      /* text on accent fill — mirrors CTA text                 */
  --accent-rgb:    var(--fg-subtle-rgb); /* → 136,139,145 dark / 95,100,107 light; neutral tints  */
  --on-danger:     #FFFFFF;  /* text on danger fill — white passes AA          */

  --link:       var(--fg);            /* inline text links — paired with always-on underline    */
  --link-hover: var(--cta-bg);        /* hover lift: near-white dark / near-black light         */
  --focus-ring: var(--fg-subtle);     /* keyboard focus rings — neutral, 5.7:1 vs bg            */
  --decor:      var(--fg-subtle);     /* eyebrows, KB icons, section marks — non-interactive    */

  --cta-bg:    #ededf0;
  --cta-text:  #16161b;
  --cta-hover: #dcdce0;

  --cta-grad:      linear-gradient(135deg, #f4f4f6, #dcdce0);  /* primary button fill  */
  --cta-shadow:    rgba(0,0,0,0.5);                            /* primary button shadow */
  --danger-grad:   linear-gradient(135deg, #d6564a, #b83c33);  /* destructive button   */
  --page-grad:     radial-gradient(1000px 600px at 80% -12%, rgba(255,255,255,0.04), transparent 55%), linear-gradient(180deg, #101015 0%, #0b0b0e 100%);
  --editor-bg:     #0d0d11;                    /* rich-text editor content area        */
  --header-strip:  rgba(255,255,255,0.03);     /* panel / table header band            */
  --hover-row:     rgba(255,255,255,0.04);     /* table row + list hover                */
  --icon-invert:   1;                          /* invert dark PNG sprites (Toast UI) in dark mode */
  --select-caret:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ededf0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ---- Status — functional only ---- */
  --success:     #22C55E;
  --danger:      #E5645A;
  --warning:     #F5A524;
  --info:        #38BDF8;
  --success-rgb: 34, 197, 94;
  --danger-rgb:  229, 100, 90;
  --warning-rgb: 245, 165, 36;
  --info-rgb:    56, 189, 248;
  --fg-subtle-rgb: 110, 110, 117;  /* for neutral-grey pill fills         */

  --font-display: 'Space Grotesk', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;

  /* ---- Spacing scale (base 4px) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Radii ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;
  --radius-btn:  20px;
  --radius-card: 22px;

  /* ---- Controls ---- */
  --control-h:  48px;
  --btn-pad:    10px 25px;

  /* ---- Elevation ---- */
  --shadow-card:     0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 14px 40px rgba(0, 0, 0, 0.5);

  /* ---- Console surfaces — intentionally darker than --bg/--surface ---- */
  --console-bg:     #0a0a0a;
  --console-bar-bg: #111111;

  --console-text:        #C6C9CD;  /* = dark --fg-muted  */
  --console-prompt-col:  #D8DADD;
  --console-ok-col:      #22C55E;  /* = dark --success   */
  --console-err-col:     #E5645A;  /* = dark --danger    */
  --console-dim-col:     #888B91;  /* = dark --fg-subtle */

  /* ---- Scrim / bg-rgb — for rgba() tints in component files ---- */
  --bg-rgb:    11, 11, 14;
  --scrim-rgb: 0, 0, 0;       /* pure black overlay — constant both themes */

  /* ---- Layout rhythm ---- */
  --container-max: 1200px;
  --section-y:     clamp(64px, 8vw, 96px);

  /* ---- Motion ---- */
  --transition:        150ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-fast:   150ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-normal: 200ms cubic-bezier(0.23, 1, 0.32, 1);

  --order-accent-a:         #3b4f6b;   /* slate blue  */
  --order-accent-b:         #3f5a48;   /* slate green */
  --order-accent-c:         #6f5d38;   /* warm tan    */
  --order-accent-grad:      linear-gradient(135deg, #3b4f6b, #3f5a48);
  --order-accent-grad-soft: linear-gradient(135deg, #3b4f6b, #3f5a48 60%, #6f5d38);
  --order-avatar-grad:      linear-gradient(135deg, #6f5d38, #3f5a48);  /* account avatar — theme-independent */
  --order-accent-shadow:    0 8px 20px rgba(59, 79, 107, 0.32);
  --order-on-accent:        #ffffff;

  /* Order CTA accent — MONOCHROME, order-only; near-WHITE in dark */
  --order-cta-grad:    linear-gradient(135deg, #f4f4f6, #dcdce0);
  --order-cta-solid:   #ededf0;   /* near-white accent */
  --order-cta-fg:      #16161b;   /* dark text on the near-white accent */
  --order-cta-shadow:  0 10px 24px -6px rgba(0,0,0,0.55);

  --order-font-display:     'Space Grotesk', 'Inter', system-ui, sans-serif;
  --order-font-body:        'Manrope', 'Inter', system-ui, sans-serif;

  --order-page-bg:      linear-gradient(180deg, #101015 0%, #0b0b0e 100%);
  --order-card-bg:      #131318;
  --order-card-border:  rgba(255,255,255,0.06);
  --order-card-shadow:  0 16px 40px -10px rgba(0,0,0,0.62);
  --order-cart-shadow:  0 18px 48px rgba(0,0,0,0.6);
  --order-group-header: rgba(255,255,255,0.025);
  --order-cart-header:  linear-gradient(135deg, #2e2e38, #22222a);

  --order-text-main:    #f0f0f2;   /* ink */
  --order-text-muted:   #8c8c93;
  --order-text-faint:   #5f5f66;
  --order-spec-text:    #a6a6ad;   /* (not separately specified — ink/muted mid) */
  --order-price:        #f4f4f6;   /* prices — near-white emphasis */
  --order-link:         #c9c9d0;
  --order-ip-arrow:     #8c8c93;
  --order-remove-bg:    #45454f;

  --order-select-bg:     #1a1a20;
  --order-select-border: rgba(255,255,255,0.12);
  --order-select-caret:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ededf0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --order-divider:       rgba(255,255,255,0.08);
  --order-pill-bg:       rgba(255,255,255,0.04);
  --order-inner-box:     #1a1a20;
  --order-plan-bg:       #1a1a20;   /* package card inside the order panel (same as inner box on dark) */
  --order-table-head:    #5f5f66;
  --order-slider-track:  rgba(255,255,255,0.12);

  --order-step-idle-bg:     #1a1a20;
  --order-step-idle-border: rgba(255,255,255,0.10);
  --order-step-idle-text:   #5f5f66;
  --order-step-title-idle:  #6a6a71;
  --order-step-sub-idle:    #5a5a61;

  --svc-card-bg:      #131318;
  --svc-card-border:  rgba(255,255,255,0.07);
  --svc-card-shadow:  0 14px 40px rgba(0,0,0,0.5);
  --svc-text-main:    #f0f0f2;
  --svc-text-muted:   #8c8c93;
  --svc-text-faint:   #5f5f66;
  --svc-group-header: rgba(255,255,255,0.03);
  --svc-divider:      rgba(255,255,255,0.07);
  --svc-pill:         rgba(255,255,255,0.05);
  --svc-inner:        #1a1a20;
  --svc-table-head:   #6e6e75;
  --svc-price:        #f4f4f6;
  --svc-accent:       #ededf0;                                  /* accent solid — dots / active menu */
  --svc-menu-active:  rgba(255,255,255,0.06);
  --svc-header-bg:    linear-gradient(135deg, #16161c, #191921); /* dark panel header bar (both themes) */
  --svc-header-fg:    #ffffff;                                  /* white text + light tick — theme-independent */
  --svc-header-tick:  #d8d8dd;
  --svc-slider-track: rgba(255,255,255,0.12);
  --svc-select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ededf0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="light"] {
  --bg:               #f0f1ee;
  --surface:          #ffffff;
  --surface-elevated: #f5f5f2;
  --border:           rgba(20,22,26,0.14);
  --border-subtle:    rgba(20,22,26,0.08);

  --fg:        #1c1d20;
  --text-body: #3A3E44;
  --fg-muted:  #67696d;
  --fg-subtle: #9a9b9e;

  --accent:        var(--fg);
  --accent-hover:  var(--cta-hover);
  --accent-soft:   var(--fg-muted);
  --on-accent:     var(--cta-text);
  --accent-rgb:    var(--fg-subtle-rgb); /* → 95,100,107 in light — for neutral rgba() tints    */

  --link:       var(--fg);
  --link-hover: var(--cta-bg);
  --focus-ring: var(--fg-subtle);
  --decor:      var(--fg-subtle);

  --cta-bg:    #16181a;  /* near-black CTA fill on light                 */
  --cta-text:  #ffffff;
  --cta-hover: #2B2D32;

  /* ---- Design component tokens — light variants ---- */
  --cta-grad:      linear-gradient(135deg, #2c2e31, #121417);
  --cta-shadow:    rgba(18,20,23,0.30);
  --danger-grad:   linear-gradient(135deg, #d6564a, #b83c33);
  --page-grad:     radial-gradient(1100px 700px at 80% -10%, rgba(20,22,26,0.05) 0%, transparent 55%), linear-gradient(180deg, #f7f7f5 0%, #eceeea 100%);
  --editor-bg:     #ffffff;
  --header-strip:  rgba(20,22,26,0.04);
  --hover-row:     rgba(20,22,26,0.05);
  --icon-invert:   0;                          /* dark sprites are correct on light surfaces */
  --select-caret:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2316181a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --success: #16A34A;
  --danger:  #C8392E;
  --warning: #7A4F00;
  --info:    #0E7490;
  --danger-rgb:    200, 57, 46;
  --warning-rgb:   122, 79, 0;    /* matches --warning: #7A4F00 in light */
  --success-rgb:   22, 163, 74;   /* matches --success: #16A34A in light */
  --info-rgb:      14, 116, 144;  /* matches --info: #0E7490 in light */
  --fg-subtle-rgb: 154, 155, 158;

  --shadow-card:     0 1px 2px rgba(21, 23, 26, 0.08);
  --shadow-elevated: 0 10px 34px rgba(20, 22, 26, 0.06);

  --bg-rgb: 240, 241, 238;

  --order-cta-grad:    linear-gradient(135deg, #2c2e31, #121417);
  --order-cta-solid:   #16181a;   /* near-black accent */
  --order-cta-fg:      #ffffff;   /* white text on the near-black accent */
  --order-cta-shadow:  0 8px 20px -4px rgba(20,22,26,0.22);

  --order-page-bg:      linear-gradient(180deg, #f7f7f5 0%, #eceeea 100%);
  --order-card-bg:      #ffffff;
  --order-card-border:  rgba(20,22,26,0.08);
  --order-card-shadow:  0 8px 24px -6px rgba(20,22,26,0.12), 0 2px 6px -2px rgba(20,22,26,0.08);
  --order-cart-shadow:  0 14px 40px rgba(20,22,26,0.10);
  --order-group-header: rgba(20,22,26,0.04);
  --order-cart-header:  linear-gradient(135deg, #2c2e31, #16181a);

  --order-text-main:    #1c1d20;   /* ink */
  --order-text-muted:   #67696d;
  --order-text-faint:   #9a9b9e;
  --order-spec-text:    #4c4e52;
  --order-price:        #16181a;   /* near-black emphasis */
  --order-link:         #3d3f43;
  --order-ip-arrow:     #4c4e52;
  --order-remove-bg:    #2a2c2e;

  --order-select-bg:     #f5f5f2;
  --order-select-border: rgba(20,22,26,0.14);
  --order-select-caret:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2316181a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --order-divider:       rgba(20,22,26,0.10);
  --order-pill-bg:       rgba(20,22,26,0.04);
  --order-inner-box:     #f5f5f2;
  --order-plan-bg:       #fafaf8;   /* lighter than the inner box: a package card on a #fff panel
                                       must read as its own surface without going grey */
  --order-table-head:    #9a9b9e;
  --order-slider-track:  rgba(20,22,26,0.12);

  --order-step-idle-bg:     #f5f5f2;
  --order-step-idle-border: rgba(20,22,26,0.12);
  --order-step-idle-text:   #9a9b9e;
  --order-step-title-idle:  #67696d;
  --order-step-sub-idle:    #9a9b9e;

  --svc-card-bg:      #ffffff;
  --svc-card-border:  rgba(20,22,26,0.08);
  --svc-card-shadow:  0 10px 34px rgba(20,22,26,0.06);
  --svc-text-main:    #1c1d20;
  --svc-text-muted:   #67696d;
  --svc-text-faint:   #9a9b9e;
  --svc-group-header: linear-gradient(110deg, rgba(20,22,26,0.05) 0%, rgba(20,22,26,0.025) 100%);
  --svc-divider:      rgba(20,22,26,0.10);
  --svc-pill:         rgba(20,22,26,0.05);
  --svc-inner:        #f3f4f6;
  --svc-table-head:   #9a9b9e;
  --svc-price:        #1c1d20;
  --svc-accent:       #16181a;
  --svc-menu-active:  rgba(20,22,26,0.05);
  --svc-header-bg:    linear-gradient(135deg, #2a2c30, #16181a);
  --svc-slider-track: rgba(20,22,26,0.14);
  --svc-select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2316181a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}