/* ============================================================
   COLORS — Shubhi Portfolio 2026
   Dark-first, monochrome + warm. Ink scale (cool-neutral darks),
   Bone scale (warm off-whites for text/light surfaces),
   a single muted-yellow accent (the hero lamp bulb / ✦ glyph).
   ============================================================ */
:root {
  /* --- Ink: near-black neutrals (dark surfaces, borders) --- */
  --ink-950: #0A0A0A;   /* page background */
  --ink-925: #0F0F0F;
  --ink-900: #141414;   /* raised surface */
  --ink-850: #1C1C1C;   /* card / elevated */
  --ink-800: #262626;   /* hover surface */
  --ink-700: #333333;   /* strong border */
  --ink-600: #4D4D4D;
  --ink-500: #6E6E6E;   /* muted text */
  --ink-400: #8A8A8A;   /* secondary text */
  --ink-300: #A8A8A8;

  /* --- Bone: warm off-whites (primary text on dark, light surfaces) --- */
  --bone-50:  #F4F1E8;  /* primary text on dark (warm white) */
  --bone-100: #EDEAE0;
  --bone-200: #E4E0D3;
  --bone-300: #D8D3C4;
  --paper:    #F5F2EA;  /* light-theme page (the Cura "bone" surface) */
  --paper-card: #FFFFFF;
  --white:    #FFFFFF;  /* peak highlight only */

  /* --- Accent: NONE. System is fully monochrome by request.
     These aliases resolve to warm bone/white so any "accent" usage
     (glyphs, active states, the hero light) reads as pure light, not color. --- */
  --accent-glow: rgba(244, 241, 232, 0.12);

  /* --- Fixed alpha whites/blacks for borders on any bg --- */
  --alpha-white-08: rgba(255,255,255,0.08);
  --alpha-white-12: rgba(255,255,255,0.12);
  --alpha-white-18: rgba(255,255,255,0.18);
  --alpha-black-08: rgba(10,10,10,0.08);
  --alpha-black-14: rgba(10,10,10,0.14);

  /* ============================================================
     SEMANTIC ALIASES — default (dark) theme
     ============================================================ */
  --color-bg:            var(--ink-950);
  --color-surface:       var(--ink-900);
  --color-surface-raised:var(--ink-850);
  --color-surface-hover: var(--ink-800);

  --color-border:        var(--alpha-white-08);
  --color-border-strong: var(--alpha-white-18);
  --color-divider:       var(--alpha-white-08);

  --text-strong:   var(--white);      /* peak-lit headline */
  --text-primary:  var(--bone-50);    /* body / most text */
  --text-secondary:var(--ink-400);    /* supporting copy */
  --text-muted:    var(--ink-500);    /* meta, numbers, labels */

  --accent:        var(--bone-50);
  --accent-dim:    var(--ink-300);

  /* filled ("primary") action = bone chip on dark */
  --action-fill-bg:   var(--bone-50);
  --action-fill-text: var(--ink-950);
  --action-fill-hover:var(--white);
  /* focus ring */
  --focus-ring: rgba(244, 241, 232, 0.45);
}

/* ============================================================
   LIGHT THEME — the warm "paper" surface (Cura app, light toggle)
   Apply on any subtree: <div data-theme="light"> or [data-theme=light]
   ============================================================ */
[data-theme="light"] {
  --color-bg:            var(--paper);
  --color-surface:       var(--paper-card);
  --color-surface-raised:var(--paper-card);
  --color-surface-hover: #F0EDE4;

  --color-border:        var(--alpha-black-08);
  --color-border-strong: var(--alpha-black-14);
  --color-divider:       var(--alpha-black-08);

  --text-strong:   #0A0A0A;
  --text-primary:  #161616;
  --text-secondary:#5A5A5A;
  --text-muted:    #8A8A8A;

  --action-fill-bg:   var(--ink-950);
  --action-fill-text: var(--bone-50);
  --action-fill-hover:#000000;
}