/* ============================================================
   Xucho — Design tokens
   1:1 port of @phreshos/react-ui + @phreshos/core Appearance.
   Two themes (light/dark), one spacing (12px), one radius (10px).
   ============================================================ */

:root {
  /* Scale levels: xsmall .25 | small .5 | medium 1 | large 1.5 | xlarge 2 */
  --spacing: 12px;
  --spacing-xs: calc(var(--spacing) * 0.25);   /*  3px */
  --spacing-s:  calc(var(--spacing) * 0.5);    /*  6px */
  --spacing-m:  var(--spacing);                /* 12px */
  --spacing-l:  calc(var(--spacing) * 1.5);    /* 18px */
  --spacing-xl: calc(var(--spacing) * 2);      /* 24px */

  --radius: 10px;
  --radius-xs: calc(var(--radius) * 0.25);     /* 2.5px */
  --radius-s:  calc(var(--radius) * 0.5);      /*  5px */
  --radius-m:  var(--radius);                  /* 10px */
  --radius-l:  calc(var(--radius) * 1.5);      /* 15px */
  --radius-xl: calc(var(--radius) * 2);        /* 20px */
  --radius-full: 9999px;

  /* Motion (tempo 1). change=102ms ease-out; window/view are computed in JS */
  --duration: 102ms;
  --easing: ease-out;              /* cubic-bezier(0,0,0.58,1) */
  --window-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --window-easing-leaving: cubic-bezier(0.65, 0, 0.35, 1);

  /* Type scale (relative em, inherited from Roboto host) */
  --text-window-title: 0.8125rem;  /* 13px */
  --text-taskbar-label: 0.6875rem; /* 11px */
  --text-taskbar-status: 0.625rem; /* 10px */
  --control-font-sizes: 0.8125;    /* medium, em-based in controls.css */
  --secondary-font-size: 0.92em;
  --line-height: 1.45;

  /* Shadow tokens (Tailwind-era shell rules) */
  --shadow-taskbar-control: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-taskbar-item: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-taskbar-item-active: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 5px 12px -5px rgba(12, 46, 88, 0.5);
  --shadow-taskbar-separator: 1px 0 0 rgba(30, 64, 100, 0.12);
  --shadow-window-controls: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(12, 46, 88, 0.15);
  --shadow-window-content: inset 0 0 0 1px rgba(255, 255, 255, 0.45);

  /* Resting + floating shadows (Appearance shadow: 0,0,10,0,.07) */
  --shadow-resting: 0 0 10px 0 rgba(0, 0, 0, 0.07);
  --shadow-floating: 0 0 30px 0 rgba(0, 0, 0, 0.112);

  /* Fonts */
  --font-ui: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Theme colors (exact @phreshos/core values) ---- */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --color-background: #fbf8f4;
  --color-foreground: #2b211a;
  --color-default:    #fffdfa;
  --color-primary:    #f5b37d;
  --color-secondary:  #3f7de0;
  --color-success:    #3f9a4e;
  --color-warning:    #d99a1e;
  --color-danger:     #d8483b;
  --color-info:       #1b9aa6;

  /* Material (light) */
  --material-grain: 0.03;
  --material-grain-amount: 0.95;
  --material-backdrop: 0;
  --material-opacity: 0.96;
  --material-distortion: 0;
  --material-saturation: 1;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #0a131f;
  --color-foreground: #e7edf5;
  --color-default:    #15202d;
  --color-primary:    #f5b37d;
  --color-secondary:  #6ea2ff;
  --color-success:    #6cc47a;
  --color-warning:    #f0bd4f;
  --color-danger:     #f07564;
  --color-info:       #4cc9d3;

  --material-grain: 0.02;
  --material-grain-amount: 0.95;
  --material-backdrop: 0;
  --material-opacity: 0.96;
  --material-distortion: 0;
  --material-saturation: 1;
}

/* Derived levels — computed at runtime by color.js and mirrored here
   as defaults so first paint is correct before JS runs. Light: */
:root, :root[data-theme="light"] {
  --primary-subtle:   #f6c49b;
  --primary-soft:     #f7cdae;
  --primary-strong:   #d98f4e;
  --primary-intense:  #c47130;
  --secondary-subtle: #7aa3e9;
  --secondary-soft:   #a7c3f0;
  --secondary-strong: #2f63b5;
  --secondary-intense:#25518f;
  --danger-subtle:    #e97c6f;
  --danger-soft:      #eda899;
  --danger-strong:    #b23529;
  --danger-intense:   #962a20;
  --success-subtle:   #86bd8d;
  --success-soft:     #aed4b3;
  --success-strong:   #2f7a3b;
  --success-intense:  #266430;
  --warning-subtle:   #e5b564;
  --warning-soft:     #eed296;
  --warning-strong:   #ad7816;
  --warning-intense:  #8e620f;
  --info-subtle:      #6dbcc5;
  --info-soft:        #9dd6dd;
  --info-strong:      #157984;
  --info-intense:     #0f626b;
  --default-subtle:   #e4e0d8;
  --default-soft:     #efece5;
  --default-strong:   #e7e1d7;
  --default-intense:  #d9d1c3;
  --background-recessed: #f1ece3;
  --veil-hover: rgba(43, 33, 26, 0.065);
  --veil-press:  rgba(43, 33, 26, 0.13);
  --separator: rgba(43, 33, 26, 0.1);
  --selection: #f2e6d9;
  --rim-light: rgba(255, 255, 255, 0.55);
}
:root[data-theme="dark"] {
  --primary-subtle:   #f6c49b;
  --primary-soft:     #f7cdae;
  --primary-strong:   #d98f4e;
  --primary-intense:  #c47130;
  --secondary-subtle: #93baf6;
  --secondary-soft:   #a7c3f0;
  --secondary-strong: #4d7fd9;
  --secondary-intense:#3a69bd;
  --danger-subtle:    #f39c8d;
  --danger-soft:      #f7b8ab;
  --danger-strong:    #d95545;
  --danger-intense:   #c24536;
  --success-subtle:   #93d29e;
  --success-soft:     #aadfb4;
  --success-strong:   #45a558;
  --success-intense:  #378947;
  --warning-subtle:   #f4cd80;
  --warning-soft:     #f8dda8;
  --warning-strong:   #c8993a;
  --warning-intense:  #a97e26;
  --info-subtle:      #74d6de;
  --info-soft:        #96e0e6;
  --info-strong:      #3ab1bc;
  --info-intense:     #2d95a0;
  --default-subtle:   #3a4a5c;
  --default-soft:     #4d5d70;
  --default-strong:   #d7dce3;
  --default-intense:  #b9c2cd;
  --background-recessed: #060d16;
  --veil-hover: rgba(231, 237, 245, 0.065);
  --veil-press:  rgba(231, 237, 245, 0.13);
  --separator: rgba(231, 237, 245, 0.1);
  --selection: #22344a;
  --rim-light: rgba(255, 255, 255, 0.18);
}

/* Disabled + focus */
:root {
  --disabled-opacity: 0.46;
  --control-secondary-opacity: 0.66;
  --control-placeholder-opacity: 0.55;
}

/* Document theme switch freeze (react-ui DocumentTheme) */
html[data-phreshos-theme-change] *,
html[data-phreshos-theme-change] *::before,
html[data-phreshos-theme-change] *::after {
  transition-delay: 0s !important;
  transition-duration: 0s !important;
}