/* ═══════════════════════════════════════════════════════════════
   Younis Code — نظام تصميم منصة برمجة
   برتقالي → أحمر · فحم داكن · إحساس مطوّر
   ═══════════════════════════════════════════════════════════════ */

:root {
  --brand-950: #1a100c;
  --brand-900: #2a1710;
  --brand-800: #4a2214;
  --brand-700: #a33a12;
  --brand-600: #d94a14;
  --brand-500: #f05a1a;
  --brand-400: #ff7a2f;
  --brand-300: #ffb07a;
  --brand-100: rgba(240, 90, 26, 0.12);
  --brand-50:  rgba(240, 90, 26, 0.06);

  --beige-50:  #faf7f4;
  --beige-100: #f3ece6;
  --beige-200: #e8ddd3;
  --beige-300: #d4c2b4;
  --beige-400: #b08f78;
  --beige-500: #7a5c4a;
  --beige-soft: rgba(255, 122, 47, 0.14);

  --gold-700: #b42318;
  --gold-600: #d92d20;
  --gold-500: #e83b2e;
  --gold-400: #f05a1a;
  --gold-300: #ff8a4a;
  --gold-soft: rgba(232, 59, 46, 0.14);

  --brand: #d94a14;
  --accent: #f05a1a;
  --accent-soft: rgba(240, 90, 26, 0.12);
  --accent-violet: #4a2214;
  --accent-cyan: #ff7a2f;
  --accent-amber: #ff8a1a;
  --accent-green: #1aa37a;
  --accent-gold: #e83b2e;
  --air: #ff7a2f;
  --water: #d94a14;
  --flame: #e83b2e;

  --page-bg: #f7f3ef;
  --page-bg-alt: #efe8e1;
  --card-bg: #ffffff;
  --card: #ffffff;
  --card-bg-strong: #fffaf6;
  --card-soft: #f3ebe4;

  --surface-soft: rgba(217, 74, 20, 0.06);
  --surface-strong: rgba(217, 74, 20, 0.12);
  --surface-highlight: rgba(255, 122, 47, 0.14);
  --surface-highlight-strong: rgba(232, 59, 46, 0.16);

  --text: #2f2926;
  --text-strong: #1a1512;
  --muted: #6f635c;
  --muted-strong: #4a403b;

  --border: rgba(42, 23, 16, 0.10);
  --border-strong: rgba(217, 74, 20, 0.28);
  --brand-border: var(--border);
  --gold-border: rgba(232, 59, 46, 0.42);
  --shadow: 0 16px 40px rgba(26, 16, 12, 0.10);
  --shadow-soft: 0 6px 18px rgba(26, 16, 12, 0.07);
  --shadow-strong: 0 26px 60px rgba(26, 16, 12, 0.16);
  --shadow-gold: 0 10px 28px rgba(217, 74, 20, 0.22);

  --primary: #d94a14;
  --primary-strong: #2a1710;
  --primary-weak: rgba(240, 90, 26, 0.14);

  --field-bg: #ffffff;
  --field-text: var(--text);
  --field-border: rgba(42, 23, 16, 0.14);

  --btn-solid-bg: linear-gradient(135deg, #2a1710 0%, #a33a12 48%, #f05a1a 100%);
  --btn-solid-text: #fff8f3;
  --btn-gold-bg: linear-gradient(135deg, #d94a14 0%, #f05a1a 45%, #ff8a4a 100%);
  --btn-gold-text: #1a100c;

  --success: #1aa37a;
  --danger: #d4524a;
  --warning: #f05a1a;
  --success-soft-bg: rgba(26, 163, 122, 0.12);
  --success-soft-border: rgba(26, 163, 122, 0.36);
  --danger-soft-bg: rgba(212, 82, 74, 0.12);
  --danger-soft-border: rgba(212, 82, 74, 0.36);
  --warning-soft-bg: rgba(240, 90, 26, 0.14);
  --warning-soft-border: rgba(240, 90, 26, 0.40);

  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-arch: 14px;

  --sw-bg: #e8ddd3;
  --sw-knob: #ffffff;

  --hdr-bg: rgba(255, 250, 246, 0.86);
  --hdr-text: #1a1512;
  --hdr-border: rgba(217, 74, 20, 0.14);
  --hdr-fade: transparent;

  --grid-line: rgba(217, 74, 20, 0.07);
  --page-glow-1: rgba(240, 90, 26, 0.16);
  --page-glow-2: rgba(232, 59, 46, 0.12);

  --grad-brand: linear-gradient(135deg, #a33a12, #f05a1a);
  --grad-gold: linear-gradient(135deg, #d94a14, #ff8a4a);
  --grad-hero: linear-gradient(165deg, #fff8f3 0%, #f3ebe4 42%, #ebe0d6 100%);
  --grad-parchment: linear-gradient(180deg, #faf7f4 0%, #f3ebe4 55%, #ebe0d6 100%);
  --grad-water-air: linear-gradient(120deg, #a33a12 0%, #f05a1a 42%, #e83b2e 100%);
  --grad-code: linear-gradient(135deg, #ff7a2f 0%, #d94a14 50%, #e83b2e 100%);

  --font-display: 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body: 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-calli: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: light;

  --ornament-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='72' viewBox='0 0 84 72'%3E%3Cg fill='none' stroke='%23d94a14' stroke-opacity='0.08' stroke-width='1.2'%3E%3Cpath d='M18 18h12M24 12v12M54 42h12M60 36v12'/%3E%3Cpath d='M12 48c8-2 14 4 20 2s10-8 18-6'/%3E%3Cpath d='M40 16l4 8 8 2-6 6 2 8-8-4-8 4 2-8-6-6 8-2z'/%3E%3C/g%3E%3C/svg%3E");
  --ornament-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d94a14' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M8 12h8M12 8v8M44 44h8M48 40v8'/%3E%3Cpath d='M20 40c6-1 10 3 14 2M36 20c4 1 7-2 10-1'/%3E%3C/g%3E%3C/svg%3E");
}

html[data-theme="dark"] {
  --brand: #ff8a4a;
  --brand-950: #120c0a;
  --brand-900: #1a100c;
  --brand-800: #2a1710;
  --brand-700: #c44512;
  --brand-600: #e85a1e;
  --brand-500: #ff7a2f;
  --brand-400: #ff9a55;
  --brand-300: #ffc49a;
  --brand-100: rgba(255, 122, 47, 0.14);
  --brand-50:  rgba(255, 122, 47, 0.08);

  --beige-400: #c49a7e;
  --beige-500: #e8c9b0;

  --page-bg: #120c0a;
  --page-bg-alt: #1a110e;
  --card-bg: #1e1410;
  --card: #1e1410;
  --card-bg-strong: #2a1a14;
  --card-soft: #18110e;

  --surface-soft: rgba(255, 122, 47, 0.08);
  --surface-strong: rgba(255, 138, 74, 0.16);
  --surface-highlight: rgba(255, 122, 47, 0.14);
  --surface-highlight-strong: rgba(232, 59, 46, 0.18);

  --text: #f3e9e2;
  --text-strong: #ffffff;
  --muted: #b8a79c;
  --muted-strong: #e0d2c8;

  --border: rgba(255, 248, 243, 0.10);
  --border-strong: rgba(255, 122, 47, 0.32);
  --brand-border: var(--border);
  --gold-border: rgba(255, 138, 74, 0.40);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.32);
  --shadow-strong: 0 28px 64px rgba(0, 0, 0, 0.58);
  --shadow-gold: 0 10px 28px rgba(0, 0, 0, 0.4);

  --primary: #ff8a4a;
  --primary-strong: #ffb07a;
  --primary-weak: rgba(255, 122, 47, 0.16);

  --accent: #ff8a4a;
  --accent-soft: rgba(255, 122, 47, 0.16);
  --accent-cyan: #ff9a55;
  --air: #ff9a55;

  --field-bg: #160f0c;
  --field-text: #f0e4dc;
  --field-border: rgba(255, 248, 243, 0.12);

  --btn-solid-bg: linear-gradient(135deg, #4a2214 0%, #d94a14 55%, #e83b2e 100%);
  --btn-solid-text: #fff8f3;
  --btn-gold-text: #1a100c;

  --hdr-bg: rgba(18, 12, 10, 0.82);
  --hdr-border: rgba(255, 122, 47, 0.18);
  --hdr-text: #fff8f3;

  --grid-line: rgba(255, 122, 47, 0.07);
  --page-glow-1: rgba(240, 90, 26, 0.18);
  --page-glow-2: rgba(232, 59, 46, 0.12);
  --grad-hero: linear-gradient(165deg, #120c0a 0%, #1a110e 48%, #241610 100%);
  --grad-parchment: linear-gradient(180deg, #1a110e 0%, #120c0a 55%, #0e0907 100%);
  --grad-brand: linear-gradient(135deg, #a33a12, #ff7a2f);
  --grad-gold: linear-gradient(135deg, #d94a14, #ff8a4a);
  --grad-water-air: linear-gradient(120deg, #4a2214 0%, #d94a14 48%, #e83b2e 100%);
  --grad-code: linear-gradient(135deg, #ff7a2f 0%, #d94a14 50%, #e83b2e 100%);

  --sw-bg: #2a1a14;
  --sw-knob: #f0e4dc;

  --ornament-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='72' viewBox='0 0 84 72'%3E%3Cg fill='none' stroke='%23ff8a4a' stroke-opacity='0.10' stroke-width='1.2'%3E%3Cpath d='M18 18h12M24 12v12M54 42h12M60 36v12'/%3E%3Cpath d='M12 48c8-2 14 4 20 2s10-8 18-6'/%3E%3C/g%3E%3C/svg%3E");
  --ornament-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ff8a4a' stroke-opacity='0.09' stroke-width='1'%3E%3Cpath d='M8 12h8M12 8v8M44 44h8M48 40v8'/%3E%3Cpath d='M20 40c6-1 10 3 14 2M36 20c4 1 7-2 10-1'/%3E%3C/g%3E%3C/svg%3E");

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--page-bg);
  overflow-x: hidden;
}

body.yc-platform,
body.yc-code {
  position: relative;
  background:
    radial-gradient(ellipse 90% 60% at 8% -10%, var(--page-glow-1), transparent 58%),
    radial-gradient(ellipse 70% 50% at 100% 0%, var(--page-glow-2), transparent 52%),
    var(--grad-parchment);
}

body.yc-platform::before,
body.yc-code::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--ornament-tile);
  background-size: 48px 48px, 48px 48px, 64px 64px;
  opacity: .45;
}

body.yc-platform::after,
body.yc-code::after { content: none; display: none; }

body.yc-platform > *:not(.yc-ambient),
body.yc-code > *:not(.yc-ambient) {
  position: relative;
  z-index: 1;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }

.container {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.platform-logo__img--light { display: block; }
.platform-logo__img--dark { display: none; }
html[data-theme="dark"] .platform-logo__img--light { display: none; }
html[data-theme="dark"] .platform-logo__img--dark { display: block; }

.yc-ico { display: block; flex: none; }