:root{
  color-scheme: light dark;

  /* Brand */
  --iris-1:#88CCEE;
  --iris-2:#44AA99;
  --iris-3:#332288;

  --accent:#332288;
  --accent-soft: rgba(51,34,136,.08);

  /* Surfaces */
  --bg:#F6FAFC;
  --surface:#FFFFFF;
  --surface-strong:#FFFFFF;
  --surface-soft:#F6F8F9;

  /* Text */
  --text:#1F2340;
  --text-muted:#55607A;

  /* Controls */
  --active: rgb(101, 174, 198);
  --control-bg: rgba(255,255,255,.65);
  --control-border: rgba(0,0,0,.12);
  --control-text: rgba(0,0,0,.85);

  --control-active-bg: rgba(0,0,0,.12);
  --control-active-text: rgba(0,0,0,.9);

  --control-hover-bg: rgba(255,255,255,.9);
  --control-hover-border: rgba(0,0,0,.14);
  --control-hover-shadow: rgba(0,0,0,.08);

  --control-highlight: rgba(255,255,255,.25);

  /* Effects */
  --ring: rgba(51,34,136,.35);
  --shadow-soft: rgba(0,0,0,.12);
  --shadow-strong: rgba(0,0,0,.45);
}

/* System dark mode default
   Used automatically by iframe/content pages */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;

    /* Brand */
    --iris-1:#355C7D;
    --iris-2:#2D6A6A;
    --iris-3:#1E255E;

    --accent:#9FAEFF;
    --accent-soft: rgba(159,174,255,.12);

    /* Surfaces */
    --bg:#0F1523;
    --surface:#182133;
    --surface-strong:#000000;
    --surface-soft:#141C2B;

    /* Text */
    --text:#EEF4FF;
    --text-muted:#A9B6CC;

    /* Controls */
    --active: rgb(89 186 239 / 59%);
    --control-bg: rgba(255,255,255,.08);
    --control-border: rgba(255,255,255,.12);
    --control-text: rgba(255,255,255,.75);

    --control-active-bg: rgba(255,255,255,.18);
    --control-active-text: rgba(255,255,255,.95);

    --control-hover-bg: rgba(255,255,255,.12);
    --control-hover-border: rgba(255,255,255,.18);
    --control-hover-shadow: rgba(0,0,0,.5);

    --control-highlight: rgba(255,255,255,.08);

    /* Effects */
    --ring: rgba(159,174,255,.35);
    --shadow-soft: rgba(0,0,0,.5);
    --shadow-strong: rgba(0,0,0,.7);
  }
}

/* Manual app override: force light */
:root[data-theme="light"]{
  color-scheme: light;

  --iris-1:#88CCEE;
  --iris-2:#44AA99;
  --iris-3:#332288;

  --accent:#332288;
  --accent-soft: rgba(51,34,136,.08);

  --bg:#F6FAFC;
  --surface:#FFFFFF;
  --surface-strong:#FFFFFF;
  --surface-soft:#F6F8F9;

  --text:#1F2340;
  --text-muted:#55607A;

  --active: rgb(101, 174, 198);
  --control-bg: rgba(255,255,255,.65);
  --control-border: rgba(0,0,0,.12);
  --control-text: rgba(0,0,0,.85);

  --control-active-bg: rgba(0,0,0,.12);
  --control-active-text: rgba(0,0,0,.9);

  --control-hover-bg: rgba(255,255,255,.9);
  --control-hover-border: rgba(0,0,0,.14);
  --control-hover-shadow: rgba(0,0,0,.08);

  --control-highlight: rgba(255,255,255,.25);

  --ring: rgba(51,34,136,.35);
  --shadow-soft: rgba(0,0,0,.12);
  --shadow-strong: rgba(0,0,0,.45);
}

/* Manual app override: force dark */
:root[data-theme="dark"]{
  color-scheme: dark;

  --iris-1:#355C7D;
  --iris-2:#2D6A6A;
  --iris-3:#1E255E;

  --accent:#9FAEFF;
  --accent-soft: rgba(159,174,255,.12);

  --bg:#0F1523;
  --surface:#182133;
  --surface-strong:#000000;
  --surface-soft:#141C2B;

  --text:#EEF4FF;
  --text-muted:#A9B6CC;

  --active: rgb(89 186 239 / 59%);
  --control-bg: rgba(255,255,255,.08);
  --control-border: rgba(255,255,255,.12);
  --control-text: rgba(255,255,255,.75);

  --control-active-bg: rgba(255,255,255,.18);
  --control-active-text: rgba(255,255,255,.95);

  --control-hover-bg: rgba(255,255,255,.12);
  --control-hover-border: rgba(255,255,255,.18);
  --control-hover-shadow: rgba(0,0,0,.5);

  --control-highlight: rgba(255,255,255,.08);

  --ring: rgba(159,174,255,.35);
  --shadow-soft: rgba(0,0,0,.5);
  --shadow-strong: rgba(0,0,0,.7);
}